js操作常见表单字段disabled、form、 name、readOnly、

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

前面我介绍了通过js实现如何获取表单元素，同时实现对表的重置（form.reset()）和提交（form.submit()）操作,需要了解表单有那些字段以及如何进一步操作的同事，最好是先熟悉表单的基本操作《js中表单的基础知识及提交表单和重置表单的操作方法》再接看此文。
? ? ?可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。此外，每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合。这个 elements 集合是一个有序列表， 其中包含着表单中的所有字段，例如、、<button>和<fieldset>。每个表单字 段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它 们。下面来看一个例子。?<br /> ? ? ?var form = document.getElementById("form1");?<br /> ? ? ?//取得表单中的第一个字段?<br /> ? ? ?var field1 = form.elements[0];?<br /> ? ? ?//取得名为"textbox1"的字段<br /> ? ? ? var field2 = form.elements["textbox1"];?<br /> ? ? ?//取得表单中包含的字段的数量?<br /> ? ? ?var fieldCount = form.elements.length;<br /> ? ? ? 如果有多个表单控件都在使用一个 name（如单选按钮），那么就会返回以该 name 命名的一个 NodeList。例如，以下面的 HTML代码片段为例。?<br /> <form method="post" action="javascript:alert('Form submitted!')" id="myForm"><br /> ? ? ?<ul><br /> ? ? ? ? ? <li><input type="radio" name="color" value="red">Red</li><br /> ? ? ? ? ? <li><input type="radio" name="color" value="green">Green</li><br /> ? ? ? ? ? <li><input type="radio" name="color" value="blue">Blue</li><br /> ? ? ?</ul><br /> </form>?<br /> ? ? ?在这个 HTML表单中，有 3个单选按钮，它们的 name 都是"color"，意味着这 3个字段是一起的。 在访问 elements["color"]时，就会返回一个 NodeList，其中包含这 3 个元素；不过，如果访问 elements[0]，则只会返回第一个元素。来看下面的例子。?<br /> ? ? ?var form = document.getElementById("myForm");?<br /> ? ? ?var colorFields = form.elements["color"];<br /> ? ? ? ? ? alert(colorFields.length); //3?<br /> ? ? var firstColorField = colorFields[0];<br /> ? ? var firstFormField = form.elements[0];<br /> ? ? ? ? ? alert(firstColorField === firstFormField); //true<br /> ? ? ?以上代码显示，通过 form.elements[0]访问到的第一个表单字段，与包含在 form.elements ["color"]中的第一个元素相同。 ? ??<br /> ? ? ?也可以通过访问表单的属性来访问元素，例如 form[0]可以取得第一个表单字 段，而 form["color"]则可以取得第一个命名字段。这些属性与通过 elements 集 合访问到的元素是相同的。但是，我们应该尽可能使用 elements，通过表单属性访 问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。?<br /> ? ? ?<strong>1. 共有的表单字段属性</strong><br /> ? ? ? 除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多 种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有字段所共有的。表单字段共有的 属性如下。?<br /> ? ? ?disabled：布尔值，表示当前字段是否被禁用。?<br /> ? ? ?form：指向当前字段所属表单的指针；只读。<br /> ? ? ?name：当前字段的名称。?<br /> ? ? ?readOnly：布尔值，表示当前字段是否只读。?<br /> ? ? ?tabIndex：表示当前字段的切换（tab）序号。<br /> ? ? ?type：当前字段的类型，如"checkbox"、"radio"，等等。?<br /> ? ? ?value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件 在计算机中的路径。 除了 form 属性之外，可以通过 JavaScript动态修改其他任何属性。来看下面的例子：?<br /> ? ? ?var form = document.getElementById("myForm");?<br /> ? ? ?var field = form.elements[0];?<br /> ? ? ?//修改 value 属性?<br /> ? ? ?field.value = "Another value";?<br /> ? ? ?//检查 form 属性的值?<br /> ? ? ?alert(field.form === form); //true?<br /> ? ? ?//把焦点设置到当前字段<br /> ? ? ? field.focus();?<br /> ? ? ?//禁用当前字段<br /> ? ? ? field.disabled = true;?<br /> ? ? ?//修改 type 属性（不推荐，但对<input>来说是可行的）?<br /> ? ? ?field.type = "checkbox"; ? ??<br /> ? ? ?能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。例如，很 多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。 为此，常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件 发生时禁用提交按钮即可。以下就是这样一个例子。?<br /> ? ? ?//避免多次提交表单?<br /> ? ? ? EventUtil.addHandler(form, "submit", function(event){<br /> ? ? ? ? ? event = EventUtil.getEvent(event);<br /> ? ? ? ? ? var target = EventUtil.getTarget(event);?<br /> ? ? ?//取得提交按钮<br /> ? ? ?var btn = target.elements["submit-btn"];?<br /> ? ? ?//禁用它<br /> ? ? ?btn.disabled = true;<br /> }); ? ? ?<br /> ? ? ?以上代码为表单的 submit 事件添加了一个事件处理程序。事件触发后，代码取得了提交按钮 并将其 disabled 属性设置为 true。注意，不能通过 onclick 事件处理程序来实现这个功能，原 因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的 submit 事件之前触发 click 事件， 而有的浏览器则相反。对于先触发 click 事件的浏览器，意味着会在提交发生之前禁用按钮，结果 永远都不会提交表单。因此，好是通过 submit 事件来禁用提交按钮。不过，这种方式不适合表 单中不包含提交按钮的情况；如前所述，只有在包含提交按钮的情况下，才有可能触发表单的 submit 事件。<br /> ? ? ? 除了<fieldset>之外，所有表单字段都有 type 属性。对于<input>元素，这个值等于 HTML特 性 type 的值。对于其他元素，这个 type 属性的值如下表所列。?<br /> 说 明 HTML示例 type属性的值<br /> 单选列表 <select>...</select> "select-one"<br /> 多选列表 <select multiple>...</select> "select-multiple"<br /> 自定义按钮 <button>...</button> "submit"<br /> 自定义非提交按钮 <button type="button">...</button> "button"<br /> 自定义重置按钮 <button type="reset">...</buton> "reset"<br /> 自定义提交按钮 <button type="submit">...</buton> "submit"<br /> ? ? ?<br /> 此外，<input>和<button>元素的 type 属性是可以动态修改的，而<select>元素的 type 属性 则是只读的。?<br /> ? ? ?<strong>2. 共有的表单字段方法</strong><br /> ? ? ?每个表单字段都有两个方法：focus()和 blur()。其中，focus()方法用于将浏览器的焦点设置 到表单字段，即激活表单字段，使其可以响应键盘事件。例如，接收到焦点的文本框会显示插入符号， 随时可以接收输入。使用 focus()方法，可以将用户的注意力吸引到页面中的某个部位。例如，在页面 加载完毕后，将焦点转移到表单中的第一个字段。为此，可以侦听页面的 load 事件，并在该事件发生 时在表单的第一个字段上调用 focus()方法，如下面的例子所示。 ? ??<br /> ? ? ?EventUtil.addHandler(window, "load", function(event){?<br /> ? ? ? ? ? document.forms[0].elements[0].focus();<br /> ? ? ? });?<br /> ? ? ?要注意的是，如果第一个表单字段是一个<input>元素，且其 type 特性的值为"hidden"，那么 以上代码会导致错误。另外，如果使用 CSS的 display 和 visibility 属性隐藏了该字段，同样也会 导致错误。?<br /> ? ? ?HTML5为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性， 不用 JavaScript就能自动把焦点移动到相应字段。例如：?<br /> ? ? ?<input type="text" autofocus><br /> ? ? ?为了保证前面的代码在设置 autofocus 的浏览器中正常运行，必须先检测是否设置了该属性，如 果设置了，就不用再调用 focus()了。?<br /> ? ? ?EventUtil.addHandler(window, "load", function(event){<br /> ? ? ? ? ? ?var element = document.forms[0].elements[0];?<br /> ? ? ? ? ? ?if (element.autofocus !== true){?<br /> ? ? ? ? ? ? ? ?element.focus(); console.log("JS focus");?<br /> ? ? ? ?}?<br /> ? ? ?}); ? ??<br /> 因为 autofocus 是一个布尔值属性，所以在支持的浏览器中它的值应该是 true。（在不支持的浏 览器中，它的值将是空字符串。）为此，上面的代码只有在 autofocus 不等于 true 的情况下才会调用 focus()，从而保证向前兼容。支持 autofocus 属性的浏览器有 Firefox 4+、Safari 5+、Chrome和 Opera 9.6。?<br /> ? ? ?在此南昌网站制作公司网络前端开发工程师认为在默认情况下，只有表单字段可以获得焦点。对于其他元素而言，如果先将其 tabIndex 属性设置为?1，然后再调用 focus()方法，也可以让这些元素获得焦点。 只有 Opera不支持这种技术。?<br /> ? ? ?与 focus()方法相对的是 blur()方法，它的作用是从元素中移走焦点。在调用 blur()方法时， 并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已。在早期 Web 开发中，那时候的表单字段还没有 readonly 特性，因此就可以使用 blur()方法来创建只读字段。 现在，虽然需要使用 blur()的场合不多了，但必要时还可以使用的。用法如下：?<br /> ? ? ?document.forms[0].elements[0].blur(); ? ??<br /> <strong>3. 共有的表单字段事件</strong><br /> ? ? ?除了支持鼠标、键盘、更改和 HTML事件之外，所有表单字段都支持下列 3个事件。?<br /> ? ? ?blur：当前字段失去焦点时触发。?<br /> ? ? ?change：对于<input>和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于 <select>元素，在其选项改变时触发。?<br /> ? ? ?focus：当前字段获得焦点时触发。?<br /> ? ? ?当用户改变了当前字段的焦点，或者我们调用了 blur()或 focus()方法时，都可以触发 blur 和 focus 事件。这两个事件在所有表单字段中都是相同的。但是，change 事件在不同表单控件中触发的 次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且 value 值改变时， 才会触发 change 事件。对于<select>元素，只要用户选择了不同的选项，就会触发 change 事件； 换句话说，不失去焦点也会触发 change 事件。?<br /> ? ? ?通常，可以使用 focus 和 blur 事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要 么是向界面中添加额外的功能（例如，为文本框显示一个下拉选项菜单）。而 change 事件则经常用于 验证用户在字段中输入的数据。例如，假设有一个文本框，我们只允许用户输入数值。此时，可以利用 focus 事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复 文本框的背景颜色，利用 change 事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实 现上述功能的代码。?<br /> <br /> ? ? ?<!DOCTYPE html><br /> <html><br /> <head><br /> ? ? ?<title>Form Field Events Example</title><br /> <script type="text/javascript" src="EventUtil.js"></script><br /> </head><br /> <body><br /> ? ? ?<p>The textbox will receive focus as soon as the page loads. You can then start typing.</p><br /> ? ? ?<form method="post" action="javascript:alert('Form submitted!')" id="myForm">?<br /> ? ? ? ? ? <div><br /> ? ? ? ? ? <label for="comments">Type numbers:</label><br /><br /> ? ? ? ? ? <input type="text" id="txtNumbers" name="numbers" /><br /> </div><br /> <input type="submit" value="Submit Form" id="submit-btn" /><br /> ? ? ?</form>?<br /> ? ? ?<script type="text/javascript"><br /> ? ? ? ? ? EventUtil.addHandler(window, "load", function(event){<br /> ? ? ? ? ? ? ? ?var textbox = document.forms[0].elements[0];<br /> <br /> ? ? ? ? ? EventUtil.addHandler(textbox, "focus", function(event){<br /> ? ? ? ? ? ? ? ?event = EventUtil.getEvent(event);<br /> ? ? ? ? ? ? ? ?var target = EventUtil.getTarget(event);<br /> <br /> ? ? ? ? ? ? ? ?target.style.backgroundColor = "yellow";<br /> ? ? ? ? ? });<br /> ? ? ? EventUtil.addHandler(textbox, "blur", function(event){<br /> ? ? ? ? ? event = EventUtil.getEvent(event);<br /> ? ? ? ? ? var target = EventUtil.getTarget(event);<br /> <br /> ? ? ?if (/[^d]/.test(target.value)){<br /> ? ? ? ? ? target.style.backgroundColor = "red";<br /> ? ? ?} else {<br /> ? ? ? ? ? target.style.backgroundColor = "";<br /> ? ? ?}<br /> ? ? ?});<br /> ? ? ? EventUtil.addHandler(textbox, "change", function(event){<br /> ? ? ? ? ? event = EventUtil.getEvent(event);<br /> ? ? ? ? ? var target = EventUtil.getTarget(event);<br /> <br /> ? ? ? ? ? if (/[^d]/.test(target.value)){<br /> ? ? ? ? ? ? ? ?target.style.backgroundColor = "red";<br /> ? ? ? ? ? } else {<br /> ? ? ? ? ? ? ? ?target.style.backgroundColor = "";<br /> ? ? ? ? ? }<br /> ? ? ? ? ? });<br /> ? ? ? ? ? ?textbox.focus();<br /> ? ? ?});?<br /> ? ? ??<br /> ? ? ?</script><br /> </body><br /> </html><br /> ? ? ?在此，南昌网站建设公司网络前端开发工程师提配大家onfocus 事件处理程序将文本框的背景颜色修改为黄色，以清楚地表明当前字段已经激活。 随后，onblur 和 onchange 事件处理程序则会在发现非数值字符时，将文本框背景颜色修改为红色。 为了测试用户输入的是不是非数值，这里针对文本框的 value 属性使用了简单的正则表达式。而且， 为确保无论文本框的值如何变化，验证规则始终如一，onblur 和 onchange 事件处理程序中使用了相 同的正则表达式。?<br /> ? ? ?<br /> 关于 blur 和 change 事件的关系，并没有严格的规定。在某些浏览器中，blur 事件会先于 change 事件发生；而在其他浏览器中，则恰好相反。为此，不能假定这 两个事件总会以某种顺序依次触发，这一点要特别注意。?<br /> ? ?本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:<a href="http://www.huicuiwang.cn/apps/index.html" target="_blank"><strong>南昌APP开发公司</strong></a>-网络 <a href="http://www.huicuiwang.cn/" target="_blank">http://www.huicuiwang.cn/</a> 如转载请注明出处! </p> </div> <p>PS：所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p> <div class="page_back"> <div> 上一篇：<a href='/xingyezixun/2022011117419.html'>app开发周期[多长时间]</a> </div> <div> 下一篇：<a href='/xingyezixun/2022011117421.html'>汽车4S店APP开发能为汽车带来哪些效益？</a> </div> <span class="bapage_back_up"><a href="/xingyezixun/">返回列表页</a></span> </div> <!-------翻页 END---------> </div> </div> <!------------main END------------> <div id="foot_bg"> <div id="foot" class="warp"> <div class="copy"> <p>Copyright © 20019-2023 荟萃信息网 版权所有 <a href="http://www.beian.miit.gov.cn">蜀ICP备16021156号-2</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?92d475e604c0b54a22f1d6b404ad6885"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/84b2462dfe3afd083ae49ea91593c7fe5/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script></p> <p>电 话：0    手 机：0    传 真：    E-mail：2074917417@qq.com</p> <p>地 址：成都市金牛区 </p> <p>技术支持：<a href="/" target="_blank">荟萃网络科技</a>   </p> </div> <div class="foot_erweima"><img src="/skin/img/weixin.jpg"/> <p>扫码关注我们</p> </div> </div> </div> <div id="foot_nav_bg"> <div class="warp foot_nav"><a href="/">网站首页</a> | <a href="/app/">app开发</a>| <a href="/Development/">小程序开发</a>| <a href="/sem/">SEM竞价托管</a>| <a href="/xingyezixun/">行业资讯</a> </div> </div> <!-------------------------> <div class="toolbar"> <a href="javascript:;" class="toolbar-item toolbar-item-weixin"><span class="toolbar-layer"> <p>扫码关注我们</p> <img src="/skin/img/weixin.jpg"/></span></a> <a href="http://wpa.qq.com/msgrd?v=3&site=&menu=yes&uin=2074917417" target="_blank" class="toolbar-item toolbar-item-kefu"></a> <a href="javascript:scroll(0,0)" id="top" class="toolbar-item toolbar-item-top"></a> </div> <?php include_once("baidu_js_push.php") ?> </body> </html>