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

依然第十四章

1、选择部分文本:使用setSelectionRange()方法,两个参数为第一个字符的索引和最后一个字符之后的索引,类似于substring()方法。

2、IE8及更早版本使用范围选择部分文本。

3、通过阻止keypress的默认事件,可以屏蔽输出字符,使文本框变为只读。

4、访问剪切板可以确保粘贴到文本框中的文本内容是符合要求的,不符合时可以阻止粘贴行为。

5、HTML5约束验证API:

1、必填字段:指定required属性

2、其他输入类型:为input元素的type属性增加了几个值,不仅能够反映数据类型的信息,还提供了一些默认的验证功能。emailurl是两个得到支持最多的类型,不支持这些值的浏览器会自动将其设置为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

原文地址:https://www.cnblogs.com/zczhangcui/p/6137659.html