首页 > 代码库 > 深入理解表单脚本系列第二篇——表单字段

深入理解表单脚本系列第二篇——表单字段

×
目录
[1]访问 [2]属性 [3]方法[4]事件

前面的话

  表单字段又叫表单元素,表示表单所包含控件,如<input>、<select>等。本文将详细介绍表单字段的内容

 

访问

  每个表单都有elements属性,该属性是表单中所有元素的集合。这个elements集合是一个有序列表,其中包含着表单中的所有字段,如<input>、<textarea>、<button>和<fieldset>

  每个表单字段在elements集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和name特性来访问它们

<form action="#">    <input type="text" name="a">    <textarea name="b"></textarea>    <button name="c"></button>    <fieldset name="d"></fieldset></form><script>    var elements = document.forms[0].elements;    //[input, textarea, button, fieldset, a: input, b: textarea, c: button, d: fieldset]    console.log(elements);    //<input type="text" name="a">    console.log(elements.a);    //<textarea name="b"></textarea>    console.log(elements[1])    console.log(elements[3] === elements.d)//true</script>

 

属性

  除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性

disabled    布尔值,表示当前字段是否被禁用form        指向当前字段所属表单的指针;只读name        当前字段的名称readOnly    布尔值,表示当前字段是否只读tabIndex    表示当前字段的切换(tab)序号type        当前字段的类型,如"checkbox"、"radio"等等value       当前字段将被提交给服务器的值

  除了form属性之外,可以通过javascript动态修改其他任何属性

<form action="#">    <input value="123"></form><script>    var input = document.forms[0].elements[0];    console.log(input.disabled);//false    console.log(input.form);//<form action="#"></form>    console.log(input.name);//‘‘    console.log(input.readOnly);//false    console.log(input.tabIndex);//0    console.log(input.type);//text    console.log(input.value);//123</script>
<form action="#">    <input value="123"></form><button id="btn1">禁用(启用)</button><button id="btn2">只读(读写)</button><script>    var input = document.forms[0].elements[0];    btn1.onclick = function(){        input.disabled = !input.disabled;    }    btn2.onclick = function(){        input.readOnly = !input.readOnly;    }</script>

<iframe style="width: 100%; height: 80px;" src="http://sandbox.runjs.cn/show/lzk0shmg" frameborder="0" width="320" height="240"></iframe>

方法

  每个表单字段都有两个方法:focus()和blur()

focus()

  focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件 

  [注意]非表单元素设置tabIndex=-1,并设置focus()方法后,也可以获得焦点

blur()

  与focus()方法相对的是blur()方法,它的作用是从元素中移走焦点。在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已

<input id="test" type="text" value="123"><button id="btn1">input元素获得焦点</button><button id="btn2">input元素失去焦点</button><script>btn1.onclick = function(){test.focus();}btn2.onclick = function(){test.blur();}</script>

<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/6xsmplkv" frameborder="0" width="320" height="240"></iframe>

事件

  除了支持鼠标、键盘、更改和HTML事件之外,所有表单字段都支持下列3个事件

focus

  当前字段获得焦点时触发

blur

  当前字段失去焦点时触发

change

  对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发

  当然,也支持focusin和focusout事件,在焦点管理中已经做了详细介绍,就不再重复

<input id="test" type="text" value="123"><script>    test.onchange = function(){        this.style.backgroundColor = pink;    }</script>

<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/p0nliszy" frameborder="0" width="320" height="240"></iframe>

顺序

  当一个input元素的值改变并且失去焦点时,blur和change事件的顺序是怎么样的呢? 

  所有的浏览器的触发顺序都是先change事件,再blur事件

<input id="test" type="text" value="123"><script>    test.onblur=test.onchange = function(e){        e = e || event;        this.value += e.type + ;;    }</script>

<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/mskyshjk" frameborder="0" width="320" height="240"></iframe>

 

<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>

深入理解表单脚本系列第二篇——表单字段