js-JavaScript高级程序设计学习笔记11

依然第十四章

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