依然第十四章
1、选择部分文本:使用setSelectionRange()方法,两个参数为第一个字符的索引和最后一个字符之后的索引,类似于substring()方法。
2、IE8及更早版本使用范围选择部分文本。
3、通过阻止keypress的默认事件,可以屏蔽输出字符,使文本框变为只读。
4、访问剪切板可以确保粘贴到文本框中的文本内容是符合要求的,不符合时可以阻止粘贴行为。
5、HTML5约束验证API:
1、必填字段:指定required属性
2、其他输入类型:为input元素的type属性增加了几个值,不仅能够反映数据类型的信息,还提供了一些默认的验证功能。email和url是两个得到支持最多的类型,不支持这些值的浏览器会自动将其设置为text。
3、数值范围,number/range/datetime等,支持情况不好。可以指定min属性/max属性/step属性。
4、输入模式:pattern属性,是一个正则表达式,用于匹配文本框中的值。比如只能输入数值,则
<input type="text" pattern="d+" name="count">模式的开头和结尾不用加^和$.
5、检测有效性。使用checkValidity()方法检测表单中的某个字段是否有效,判断依据是上述四种方法。可对表单自身调用。validity属性会告诉你为什么字段有效或无效。P430
6、禁止验证。表单添加noValidate属性表示不验证表单。给表单中的按钮添加formnovalidate属性表示点击按钮后不验证表单。
6、选择框脚本
1、选择框的value值的确定方法:
①如果没有选中的项,则选择框的value保存空字符串。
②如果有一个选中项,而且该项的value特性的值为空字符串,那么选择框的value为空字符串。
③选中项没有value特性,那么选择框的value等于选中项的文本。
④如果有多个选中项,根据前两条取第一个选中项的值。
2、每个<option>元素都有一个HTMLOptionElement对象,属性有index/label/selected/text/value。不建议使用标准DOM方法取得option元素的文本和值。
3、获得单选框的选中项,可以使用选择框的selectedIndex属性。获取多选框的选中项,可以循环遍历选项集合,测试每一项的selected属性。
4、添加选项
//方法一,DOM方法 var newOption=document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value","Option value"); selectbox.appendChild(newOption); //方法二,使用Option构造函数,IE8及之前版本有问题。 var newOption=new Option("Option text","Option value"); selectbox.appendChild(newOption); //方法三,使用选择框的add()方法,最佳方案 var newOption=new Option("Option text","Option value"); selectbox.add(newOption,undefined);5、移除选项:①DOM的removeChild()方法,②选择框的remove()方法,接受一个参数,即要移除选项的索引。③将相应的选项设为null。要删除所有的,可以循环迭代remove(0)。
6、移动和重排:使用appendChild()方法和insertBefore()方法。
7、表单序列化P436
8、富文本编辑,所见即所得。
1、使用contenteditable属性,使得元素可编辑。
P444