HOME
NAVIGATION

表单脚本的一些DOM和HTML5方法

select()方法

select()方法,这个方法用于选择文本框中的所有文本

var input1 = document.getElementById("input1");
input1.select();//选中文本框中所有文本

和focus()的区别

input1.focus();//焦点在文本上,但是不选中

select事件

在选择了文本框中的文本、或者调用select()方法时,就会触发select事件,

selectionStart和selectionEnd属性

selectionStart和selectionEnd属性,可以知道用户选择了什么文本。

这两个属性保存的是基于0的数值,表示所选择的文本的范围(即文本选区开头和结尾的偏移量)具体算法参照另一篇博客。

☞点我点我

input1.onselect = function () {
alert(input1.value.substring(input1.selectionStart,input1.selectionEnd));//被选中的文本内容
}
//因为substring()方法基于字符串的偏移量执行操作,所以将selectionStart和selectionEnd直接传给它就可以取得选中的文本

document.selection对象

除了IE8及以下,都支持这两个属性,IE8支持document.selection对象,其中保存着整个文档范围内选择的文本信息,也就是说,无法确定用户选择的是页面中哪个部位的文本。不过,在与select事件一起使用的时候,可以假定是用户选择了文本框中的文本,因而触发了该事件。

input1.onselect = function () {
alert(document.selection.createRange().text)//返回一个字母
}

但是使用这个会有点问题,因为在IE8及更早版本中,鼠标按下就会直接触发select,所以在这个例子中,每次只要我选择了一个字母,就会马上有个alert。慎用!

type=”email”

注意要用form包裹input

html

<\form>
<\input type="email" id="input1" value="something" name="input1" \/>
<\input type="submit" \/>
<\/form>

直接用默认值something提交,会显示一大段话,大意就是格式不对呗。

0.添加选项

Option()构造函数来创建新选项,这个构造函数实在DOM之前就有的,接受两个参数:文本(text)和值(value);第二个参数可选。

现在我想要给select选项框在最后一个option后追加一个新的option。

add()方法

添加新选项的方式add()方法。

DOM规定这个方法接受两个参数:要添加的新选项和将位于新选项之后的选项。如果想在列表的最后添加一个选项,应该将第二个参数设置为null,在IE对add()方法的实现中,第二个参数是可选的,而且如果指定,该参数必须是新选项之后选项的索引。

所以为第二个参数传入undefined是最佳实践。

HTML

<\form> <\select name="number" id="number">
<\option value="1">1<\/option>
<\option value="2">2<\/option>
<\option value="3">3<\/option>
<\option value="4">4<\/option>
<\/select> <\/form>

JS

var newOption = new Option("5","5");
var selectBox = document.forms[0].elements["number"]
selectBox.add(newOption,undefined);

如果想将新选项添加到其他位置,就应该使用标准的DOM技术和insertBefore()方法。

1.移除选项

remove()

选择框的remove()方法,接受一个参数,即要移除选项的索引

var newOption = new Option("5","5");
var selectBox = document.forms[0].elements["number"]
selectBox.remove(0);//还剩2 3 4

removeChild()方法

selectBox.removeChild(selectBox.options[0]);

也移除了第一个选项

注意!option的索引是动态的,0位被删除了以后,1位会顶上0位的位置,下次再删除0位,就会删除原来的1位。

所以如果想要删除选项框中所有的项,只要不停地清除0位就可以了,否则就把长度存在一个变量里,再使用for循环清除选项框中的项。

另外,把selectBox.option[0] = null;也不失为一种办法。