Vinson

Vinson

JavaScript 表单脚本

发表于 2023-08-12
Vinson
阅读量 47

JavaScript 表单属性、方法

对象属性,方法

  • acceptCharset:服务器能够处理的字符集,等价于 HTML 中的 accept-charset
  • action:接受请求的 URL,等价于 HTML 中的 action 特性
  • elements:表单中所有控件(HTMLCollection)
  • enctype:请求编码类型
  • length:表单中控件的数量
  • method:要发送的 HTTP 请求类型,通常是 get、post
  • name:表单名称
  • target:用于发送请求和接收响应的窗口名称
  • reset():讲所有表单域重置为默认值
  • submit():提交表单
<form action="" novalidate></form>
js
novalidate = true;// 禁用验证
js

获取元素

document.forms[0];// 获取页面中的第一个表单
document.forms['username'];// 获取页面中的 name 为 username

form.pass; // 获取表单中 name 属性为 pass
form.elements[0];// 取得表单中第一个字段
form.elements.['textbox1'];// 取得 name 为 textbox1 的字段
form.elements.length;// 取得表单包含字段的数量
js

事件

事件也对应的有方法,form.submit() 为提交

  • 表单事件
    • input:value 值发生改变
    • onpropertychange: IE value 值改变时
    • blur:失去焦点
    • focus:获取焦点
    • select:输入框中文本被选中触发
    • change:当输入框被修改 且 失去焦点

必须添加到form表单元素上

  • submit:点击 submit 按钮才触发
  • reset:点击 reset 按钮才触发

字段属性

共有字段属性

  • disabled:布尔值,表示当前字段是否被禁用
  • form:指向当前字段所在的表单,只读
  • name:当前字段名称
  • readOnly:布尔值,表示当前字段是否只读
  • tabIndex:表示当前字段 tab 序号
  • type:当前字段类型
  • value:当前字段将被提交给服务器的值

JavaScript 文本选中检测

选中文本

inp.select(); // 选中文本框中的所有文字
function getSelectedText(text){
if(typeof text.selectionStart == 'number'){
​  // 选择文字的起始,结束下标
  return text.value.substring(text.selectionStart,text.selectionEnd);
}else if(document.selecttion){// IE 取得 IE 中的选择文本代码 调用 document.selecttion 不需要考虑 text 参数
  return document.selecttion.createRang().text;
​  }
}
js

输入检测

检测浏览器是否支持 pattern 属性

var isPatternSupported = 'pattern' in document.createElement('input');

input.stepUp(); // 加 1
input.stepUp(5); // 加 5
input.stepDown(); // 减 1
input.stepDown(5); // 减 5

// 检测有效性
if(document.forms[0].checkValidity()){
  // 整个表单有效,返回 true。 也可以单独 input 调用这个方法
}
js
  • customError:如果设置了 setCustomValidity(),则为 true,否则返回 false
  • patternMismatch:如果值与指定的 pattern 属性不匹配,返回 true
  • reangeOverflow:如果值比 max 值大,返回 true
  • rangeUnderflow:如果值比 min 值小,返回 true
  • stepMisMatch:如果 min 和 max 直接的步长值不合理,返回 true
  • tooLong:值的长度超过了 maxlenght 属性指定的长度,返回 true。火狐会自动约束字符数量,所以会永远返回 true
  • typeMismatch:如果值不是 ‘mail’ 或 ‘url’ 要求的格式,返回 true
  • valid:如果这里的属性都是 false,返回 true。checkValidity() 也要求相同的值
  • valueMissing:如果标注为 required 的字段中没有值,返回 true

选择框脚本

  • add(new option, relOption):向控件中插入行的 <option>
  • multiple:布尔值,是否允许多选
  • options:控件中所有 <option> 元素的 HTMLCollection
  • remove(index):移除给定位置的选项
  • selectedIndex:选中的索引,从 0 开始,没有则是 -1
  • size:选择框可见的行数

每个 <option> 都有一个 HTMLOptionElement 对象

  • index:当前选项在 option 集合中的索引
  • label:当前选择的标签;等价于 html 中 label 的特性
  • selected:布尔值,表示当前选项是否被选中,设为 true 可以选中当前选项
  • text:选项的文本
  • value:选项的值
评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • 测试文章

    20点赞10评论

  • webpack5(一)

    20点赞10评论