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：选项的值