快速了解JavaScript的文本框操作 2021-11-14 HTML 中使用 元素表示单行输入框和 </code> 元素表示多行文本框。<br /> HTML中使用的 <code><input></code> 元素在 JavaScript 中对应的是 <code>HTMLInputElement</code> 类型。<code>HTMLInputElement</code> 继承自 <code>HTMLElement</code> 接口：<br /> <blockquote><code>interface HTMLInputElement extends HTMLElement { ... }</code></blockquote><br /> <code>HTMLInputElement</code> 类型有一些独有的属性和方法：<br /> <ul> <li><code>name</code>：表示 <code><input></code> 元素的名称。</li> <li><code>disabled</code>：表示 <code><input></code> 元素是否禁止使用。在表单提交时不会包含被禁止的 <code><input></code> 元素。</li> <li><code>autofocus</code>：表示页面加载时，该元素是否会自动获得焦点。</li> <li><code>required</code>：表示表单提交时，该 <code><input></code>元素是否为必填。</li> <li><code>value</code>：表示该 <code><input></code> 元素的值。</li> <li><code>validity</code>：返回一个 <code>ValidityState</code> 对象，表示 <code><input></code> 元素的校验状态。是只读属性。</li> <li><code>validationMessage</code>：表示 <code><input></code> 元素校验失败时，用户看到的报错信息。如果该元素不需要校验，或者通过校验，该属性为空字符串。是只读属性。</li> <li><code>willValidate</code>：表示表单提交时，<code><input></code> 元素是否会被校验。是只读属性。</li> <li><code>select()</code>：选中 <code><input></code> 元素内部的所有文本。</li> <li><code>click()</code>：模拟鼠标点击当前的 <code><input></code> 元素。</li> </ul> 而在上述介绍 <code>HTMLInputElement</code> 类型中的属性时，<code>type</code> 属性要特别关注一下，因为根据 <code>type</code> 属性的改变，可以改变<code><input></code>的属性。<br /> <table> <thead> <tr> <th align="center">类型</th> <th align="center">描述</th> </tr> </thead> <tbody> <tr> <td align="center">text</td> <td align="center">文本输入</td> </tr> <tr> <td align="center">password</td> <td align="center">密码输入</td> </tr> <tr> <td align="center">submit</td> <td align="center">表单数据提交</td> </tr> <tr> <td align="center">button</td> <td align="center">按钮</td> </tr> <tr> <td align="center">radio</td> <td align="center">单选框</td> </tr> <tr> <td align="center">checkbox</td> <td align="center">复选框</td> </tr> <tr> <td align="center">file</td> <td align="center">文件</td> </tr> <tr> <td align="center">hidden</td> <td align="center">隐藏的字段</td> </tr> <tr> <td align="center">image</td> <td align="center">定义图像作为提交按钮</td> </tr> <tr> <td align="center">reset</td> <td align="center">重置按钮</td> </tr> </tbody> </table> 省略 <code>type</code> 属性与 <code>type="text"</code>效果一样， <code><input></code> 元素显示为文本框。<br /> 当 <code>type</code> 的值为<code>text/password/number/</code>时，会有以下属性对 <code><input></code> 元素有效。<br /> <table> <thead> <tr> <th align="center">属性</th> <th align="center">类型</th> <th align="center">描述</th> </tr> </thead> <tbody> <tr> <td align="center">autocomplete</td> <td align="center">string</td> <td align="center">字符串on或off，表示<code><input></code>元素的输入内容可以被浏览器自动补全。</td> </tr> <tr> <td align="center">maxLength</td> <td align="center">long</td> <td align="center">指定<code><input></code>元素允许的最多字符数。</td> </tr> <tr> <td align="center">size</td> <td align="center">unsigned long</td> <td align="center">表示<code><input></code>元素的宽度，这个宽度是以字符数来计量的。</td> </tr> <tr> <td align="center">pattern</td> <td align="center">string</td> <td align="center">表示<code><input></code>元素的值应该满足的正则表达式</td> </tr> <tr> <td align="center">placeholder</td> <td align="center">string</td> <td align="center">表示<code><input></code>元素的占位符，作为对元素的提示。</td> </tr> <tr> <td align="center">readOnly</td> <td align="center">boolean</td> <td align="center">表示用户是否可以修改<code><input></code>的值。</td> </tr> <tr> <td align="center">min</td> <td align="center">string</td> <td align="center">表示<code><input></code>元素的最小数值或日期。</td> </tr> <tr> <td align="center">max</td> <td align="center">string</td> <td align="center">表示<code><input></code>元素的最大数值或日期。</td> </tr> <tr> <td align="center">selectionStart</td> <td align="center">unsigned long</td> <td align="center">表示选中文本的起始位置。如果没有选中文本，返回光标在<code><input></code>元素内部的位置。</td> </tr> <tr> <td align="center">selectionEnd</td> <td align="center">unsigned long</td> <td align="center">表示选中文本的结束位置。如果没有选中文本，返回光标在<code><input></code>元素内部的位置。</td> </tr> <tr> <td align="center">selectionDirection</td> <td align="center">string</td> <td align="center">表示选中文本的方向。可能的值包括<code>forward</code>、<code>backward</code>、<code>none</code>。</td> </tr> </tbody> </table> 下面创建一个 <code>type="text"</code> ，一次显示 25 个字符，但最多允许显示 50 个字符的文本框：<br /> <blockquote><code><input type="text" size="25" maxlength="50" value="https://www.it610.com/article/initial value"></code></blockquote><br /> HTML 使用的 <code><textarea></code> 元素在 JavaScript 中对应的是 <code>HTMLTextAreaElement</code> 类型。<code>HTMLTextAreaElement</code>类型继承自 <code>HTMLElement</code> 接口：<br /> <blockquote><code>interface HTMLTextAreaElement extends HTMLElement { ... }</code></blockquote><br /> <code>HTMLTextAreaElement</code> 类型有一些独有的属性和方法：<br /> <ul> <li><code>form</code>：只读属性，返回对父表单元素的引用。如果此元素未包含在表单元素中，则它可以是同一文档中 <code>id</code> 属性同 <code>form</code> 值的 <code><form></code> 元素，如果没有，该值为 <code>null</code>。</li> <li><code>type</code>：只读属性，返回字符串<code>textarea</code>。</li> <li><code>value</code>：<code>string</code>类型，返回/设置控件中包含的原始值。</li> <li><code>textLength</code>：只读属性，<code>long</code>类型，返回<code><textarea></code>元素的<code>value</code>值的长度。与 <code>value.length</code> 相同。</li> <li><code>defaultValue</code>：<code>string</code>类型，返回/设置<code>textarea</code>元素的默认值。</li> <li><code>placeholder</code>：<code>string</code>类型，返回/设置 <code>textarea</code> 元素的占位符，作为对输入内容的提示。</li> <li><code>rows</code>：<code>unsigned long</code>类型，返回/设置<code>textarea</code>元素的可见文本行数。</li> <li><code>cols</code>：<code>unsigned long</code>类型，返回/设置 <code>textarea</code> 元素的可见宽度。</li> <li><code>autofocus</code>：<code>boolean</code>类型，返回/设置<code>textarea</code>元素在页面加载时自动获取焦点。</li> <li><code>name</code>：返回/设置 <code>textarea</code> 元素的名称。</li> <li><code>disabled</code>：<code>boolean</code>类型，返回/设置 <code>textarea</code> 元素是否应当被禁用。</li> <li><code>HTMLTextAreaElement.labels</code>：<code>NodeList</code>类型，返回与此<code>select</code>元素关联的标签元素列表。</li> <li><code>maxLength</code>：<code>long</code>类型，返回/设置元素可以输入的最大字符数。仅在值更改时才评估此约束。</li> <li><code>minLength</code>：<code>long</code>类型，返回/设置元素可以输入的最小字符数。仅在值更改时才评估此约束。</li> <li><code>accessKey</code>：<code>boolean</code>类型，返回/设置访问 <code>textarea</code> 的键盘快捷键。</li> <li><code>readOnly</code>：<code>boolean</code>类型，返回/设置 <code>textarea</code> 元素是否为只读。</li> <li><code>required</code>：<code>boolean</code> 类型，返回/设置 <code>textarea</code> 元素是否为必填项。</li> <li><code>tabIndex</code>：<code>long</code>类型，返回/设置 <code>textarea</code> 元素的 <code>tab</code> 键导航顺序中元素的位置。</li> </ul> 下面创建一个高度为 25，宽度为 5 的 <code><textarea></code> 多行文本框。它与 <code><input></code> 不同的是，初始值显示在 <code><textarea>... 之间： initial value 注意：处理文本框值的时候最好不要使用 DOM 方法，而应该使用 value 属性。 选择文本 与 </code> 都支持 <code>select()</code> 方法，该方法用于选中文本框中的所有内容。该方法的语法为：<br /> <blockquote><code>select(): void</code></blockquote><br /> 下面看一个示例：<br /> <blockquote><code>let textbox = document.forms[0].elements["input-box"]; textbox.select(); </code></blockquote><br /> 也可以在文本框获得焦点时，选中文本框的内容：<br /> <blockquote><code>textbox.addEventListener("focus", (event) => { event.target.select(); }); </code></blockquote><br /> select 事件<br /> 当选中文本框中的文本或使用 <code>select()</code> 方法时，会触发 <code>select</code> 事件。<br /> <blockquote><code>let textbox = document.forms[0].elements["textbox1"]; textbox.addEventListener("select", (event) => { console.log(`Text selected: ${textbox.value}`); }); </code></blockquote><br /> 取得选中的文本<br /> HTML5 对 <code>select</code> 事件进行了扩展，通过 <code>selectionStart</code> 和 <code>selectionEnd</code> 属性获取文本选区的起点偏移量和终点偏移量。如下所示：<br /> <blockquote><code>function getSelectedText(textbox){ return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); }</code></blockquote><br /> 注意：在 IE8 及更早版本不支持这两个属性。<br /> 选中部分文本<br /> HTML5 提供了 <code>setSelectionRange()</code> 方法用于选中部分文本：<br /> <blockquote><code>setSelectionRange(start, end, direction): void; </code></blockquote><br /> <ul> <li><code>start</code>：被选中的第一个字符的位置索引，从 0 开始。如果这个值比元素的 <code>value</code> 长度还大，则会被看做 <code>value</code> 最后一个位置的索引。</li> <li><code>end</code>：被选中的最后一个字符的下一个位置索引。如果这个值比元素的 <code>value</code> 长度还大，则会被看做 <code>value</code> 最后一个位置的索引。</li> <li><code>direction</code>：该参数是可选的字符串类型，表示选择方向，可以传入 <code>“forward”/“backward”/“none”</code> 三个值。</li> </ul> 下面看一个例子：<br /> <blockquote><code><input type="text" id="text-sample" size="20" value="https://www.it610.com/article/Hello World!"> <button onclick="selectText()">选中部分文本</button> </code></blockquote><br /> 如果想要看到选中效果，必须让文本框获得焦点。<br /> 输入过滤 不同文本框经常需要保证输入特定类型或格式的数据，或许数据需要包含特定字符或必须匹配某个特定模式。而文本框并未提供验证功能，因此要配合 JavaScript 脚本实现输入过滤功能。<br /> 屏蔽字符<br /> 有些输入框需要出现或不出现特定字符。如果想要将输入框变成只读的，只需要使用 <code>preventDefault()</code>方法将按键都屏蔽：<br /> <blockquote><code>input.addEventListener("keypress", (event) => { event.preventDefault(); }); </code></blockquote><br /> 而要屏蔽特定字符，就需要检查事件的 <code>charCode</code> 属性。如下所示，使用正则表达式实现只允许输入数字的输入框：<br /> <blockquote><code>input.addEventListener("keypress", (event) => { if (!/\d/.test(event.key)) { event.preventDefault(); } }); </code></blockquote><br /> 还有一个问题需要处理：复制、粘贴及涉及Ctrl 键的其他功能。在除IE 外的所有浏览器中，前面代码会屏蔽快捷键Ctrl+C、Ctrl+V 及其他使用Ctrl 的组合键。因此，最后一项检测是确保没有按下Ctrl键，如下面的例子所示：<br /> <blockquote><code>textbox.addEventListener("keypress", (event) => { if (!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey){ event.preventDefault(); } }); </code></blockquote><br /> 最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否允许在文本框中输入某些字符。<br /> 处理剪贴板<br /> IE 是第一个实现了剪切板相关的事件以及通过JavaScript访问剪切板数据的浏览器，其它浏览器在后来也都支持了相同的事件和剪切板的访问，后来 HTML5 将其纳入了规范。以下是与剪切板相关的 6 个事件：<br /> <ul> <li><code>beforecopy</code>：发生复制操作前触发。</li> <li><code>copy</code>：发生复制操作时触发。</li> <li><code>beforecut</code>：发生剪切操作前触发。</li> <li><code>cut</code>：发生剪切操作时触发。</li> <li><code>beforepaste</code>：发生粘贴操作前触发。</li> <li><code>paste</code>：发生粘贴操作时触发。</li> </ul> 剪切板事件的行为及相关对象会因浏览器而异。在 Safari、Chrome 和 Firefox 中，<code>beforecopy</code>、<code>beforecut</code> 和 <code>beforepaste</code> 事件只会在显示文本框的上下文菜单时触发，但 IE 不仅在这种情况下触发，也会在 <code>copy</code>、<code>cut</code> 和 <code>paste</code> 事件在所有浏览器中都会按预期触发。<br /> 在实际的事件发生之前，通过<code>beforecopy</code>、<code>beforecut</code> 和 <code>beforepaste</code> 事件可以在向剪贴板发送或从中检索数据前修改数据。不过，取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作，必须取消 <code>copy</code>、<code>cut</code>和 <code>paste</code> 事件。<br /> 剪贴板的数据通过 <code>clipboardData</code> 对象来获取，且<code>clipboardData</code> 对象提供 3 个操作数据的方法：<br /> <ul> <li><code>getData(format)</code>：从剪贴板获取指定格式的数据，接收的参数为指定获取的数据格式，如果没有指定数据格式或指定数据格式不存在，则此方法返回一个空字符串。</li> <li><code>setData(format, data)</code>：给剪贴板赋予指定格式的数据，第一个参数指定数据格式，第二个参数为第一个参数赋予数据。如果指定数据格式不存在，则将其添加到数据存储的末尾；如果指定数据格式存在，则将数据替换在指定数据格式的位置。</li> <li><code>clearData(format)</code>：删除指定格式的数据，接收的参数为指定要删除的数据格式，如果指定格式不存在，则此方法不执行任何操作；如果此参数为空字符串或未提供，则将删除所有格式的数据。</li> </ul> 而 <code>clipboardData</code> 对象在 IE 中使用 <code>window</code> 获取，在 Firefox、Safari 和 Chrome 中使用 <code>event</code> 获取。为防止未经授权访问剪贴板，只能在剪贴板事件期间访问 <code>clipboardData</code> 对象；IE 会在任何时候都暴露 <code>clipboardData</code> 对象。因此，要兼容两者，最好在剪贴板事件期间使用该对象。<br /> <blockquote><code>function getClipboardText(event){ var clipboardData = https://www.it610.com/article/(event.clipboardData || window.clipboardData); return clipboardData.getData("text"); } function setClipboardText (event, value){ if (event.clipboardData){ return event.clipboardData.setData("text/plain", value); } else if (window.clipboardData){ return window.clipboardData.setData("text", value); } }</code></blockquote><br /> 如果文本框只有数字，那剪贴时，就需要使用<code>paste</code>事件检查剪贴板上的文本是否无效。如果无效，可以取消默认行为：<br /> <blockquote><code>input.addEventListener("paste", (event) => { let text = getClipboardText(event); if (!/^\d*$/.test(text)){ event.preventDefault(); } }); </code></blockquote><br /> 注意：Firefox、Safari和Chrome只允许在<code>onpaste</code>事件中访问<code>getData()</code>方法。<br /> 自动切换 在 JavaScript 中，可以用在当前字段完成时自动切换到下一个字段的方式来增强表单字段的易用性。比如，常用手机号分为国家好加手机号。因此，我们设置 2 个文本框：<br /> <blockquote><code><form> <input type="text" name="phone1" id="phone-id-1" maxlength="4"> <input type="text" name="phone2" id="phone-id-2" maxlength="11"> </form></code></blockquote><br /> 当文本框输入到最大允许字符数后，就把焦点移到下一个文本框，这样可以增加表单的易用性并加速数据输入。如下所示：<br /> <blockquote><code></code></blockquote><br /> 这里，<code>tabForward()</code> 函数通过比较用户输入文本的长度与 <code>maxLength</code> 属性的值来检测输入是否达到了最大长度。如果两者相等，就通过循环表中的元素集合找到当前文本框，并把焦点设置到下一个元素。<br /> 注意：上面的代码只适用于之前既定的标记，没有考虑可能存在的隐藏字段。<br /> HTML5 HTML5 新增了一些表单提交前，浏览器会基于指定的规则进行验证，并在出错时显示适当的错误信息。而验证会基于某些条件应用到表单字段中。<br /> 必填字段<br /> 表单字段中添加 <code>required</code> 属性，用于标注该字段是必填项，不填则无法提交。该属性适用于<code><input></code>、<code><textarea></code>和<code></code>。如下所示：<br /> <blockquote><code><input type="text" name="account" required></code></blockquote><br /> 也可以通过 JavaScript 检测对应元素的 <code>required</code> 属性来判断表单字段是否为必填项：<br /> <blockquote><code>let isRequired = document.forms[0].elements["account"].required; </code></blockquote><br /> 也可以检测浏览器是否支持 <code>required</code> 属性：<br /> <blockquote><code>let isRequiredSupported = "required" in document.createElement("input"); </code></blockquote><br /> 注意：不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框，而Safari 什么也不做，也不会阻止提交表单。<br /> 更多输入类型<br /> HTML5 为 <code><input></code> 元素增加了几个新的 <code>type</code> 值。如下所示：<br /> <table> <thead> <tr> <th align="center">类型</th> <th align="center">描述</th> </tr> </thead> <tbody> <tr> <td align="center">number</td> <td align="center">数字值的输入</td> </tr> <tr> <td align="center">date</td> <td align="center">日期输入</td> </tr> <tr> <td align="center">color</td> <td align="center">颜色输入</td> </tr> <tr> <td align="center">range</td> <td align="center">一定范围内的值的输入</td> </tr> <tr> <td align="center">month</td> <td align="center">允许用户选择月份和年份</td> </tr> <tr> <td align="center">week</td> <td align="center">允许用户选择周和年份</td> </tr> <tr> <td align="center">time</td> <td align="center">允许用户选择时间（无时区）</td> </tr> <tr> <td align="center">datetime</td> <td align="center">允许用户选择日期和时间（有时区）</td> </tr> <tr> <td align="center">datetime-local</td> <td align="center">允许用户选择日期和时间（无时区）</td> </tr> <tr> <td align="center">email</td> <td align="center">电子邮件地址的输入</td> </tr> <tr> <td align="center">search</td> <td align="center">搜索（表现类似常规文本）</td> </tr> <tr> <td align="center">tel</td> <td align="center">电话号码的输入</td> </tr> <tr> <td align="center">url</td> <td align="center">URL地址的输入</td> </tr> </tbody> </table> 这些输入表名字段应该输入的数据类型，并且提供了默认验证。如下所示：<br /> <blockquote><code><input type="email" name="email"> <input type="url" name="homepage"></code></blockquote><br /> 要检测浏览器是否支持新类型，可以在 JavaScript 中创建 <code><input></code> 并设置 <code>type</code> 属性，之后读取它即可。老版本中会将我只类型设置为 <code>text</code>，而支持的会返回正确的值。如下所示：<br /> <blockquote><code>let input = document.createElement("input"); input.type = "email"; let isEmailSupported = (input.type == "email"); </code></blockquote><br /> 数值范围<br /> 而上面介绍的几个如 <code>number/range/datetime/datetime-local/date/month/week/time</code> 几个填写数字的类型，都可以指定 <code>min/max/step</code> 等几个与数值有关的属性。<code>step</code> 属性用于规定合法数字间隔，如 <code>step="2"</code>，则合法数字应该为 0、2、4、6，依次类推。如下所示：<br /> <blockquote><code><input type="number" min="0" max="100" step="5" name="count"></code></blockquote><br /> 上面的例子是<code><input></code>中只能输入从 0 到 100 中 5 的倍数。<br /> 也可以使用 <code>stepUp()</code> 和 <code>stepDown()</code> 方法对 <code><input></code> 元素中的值进行加减，它俩会接收一个可选参数，用于表示加减的数值。如下所示：<br /> <blockquote><code>input.stepUp(); // 加1 input.stepUp(5); // 加5 input.stepDown(); // 减1 input.stepDown(10); // 减10</code></blockquote><br /> 输入模式<br /> HTML5 还为文本添加了 <code>pattern</code> 属性，用于指定一个正则表达式。这样就可以自己设置 <code><input></code> 元素的输入模式了。如下所示：<br /> <blockquote><code><input type="text" pattern="\d+" name="count"></code></blockquote><br /> 注意模式的开头和末尾分别假设有<code>^</code>和<code>$</code>。这意味着输入内容必须从头到尾都严格与模式匹配。<br /> 与新增的输入类型一样，指定 <code>pattern</code> 属性也不会阻止用户输入无效内容。模式会应用到值，然后浏览器会知道值是否有效。通过访问 <code>pattern</code> 属性可以读取模式：<br /> <blockquote><code>let pattern = document.forms[0].elements["count"].pattern; </code></blockquote><br /> 使用如下代码可以检测浏览器是否支持pattern 属性：<br /> <blockquote><code>let isPatternSupported = "pattern" in document.createElement("input"); </code></blockquote><br /> 检测有效性<br /> HTML5 新增了 <code>checkValidity()</code> 方法，用来检测表单中任意给定字段是否有效。而判断的条件是约束条件，因此必填字段如果没有值会被视为无效，字段值不匹配 <code>pattern</code> 属性也会被视为无效。如下所示：<br /> <blockquote><code>if (document.forms[0].elements[0].checkValidity()){ // 字段有效，继续 } else { // 字段无效 }</code></blockquote><br /> 要检查整个表单是否有效，可以直接在表单上调用<code>checkValidity()</code>方法。这个方法会在所有字段都有效时返回<code>true</code>，有一个字段无效就会返回<code>false</code>：<br /> <blockquote><code>if(document.forms[0].checkValidity()){ // 表单有效，继续 } else { // 表单无效 }</code></blockquote><br /> <code>validity</code> 属性会返回一个<code>ValidityState</code> 对象，表示 <code><input></code> 元素的校验状态。返回的对象包含一些列的布尔值的属性：<br /> <ul> <li><code>customError</code>：如果设置了 <code>setCustomValidity()</code> 就返回 true，否则返回false。</li> <li><code>patternMismatch</code>：如果字段值不匹配指定的 <code>pattern</code> 属性则返回true。</li> <li><code>rangeOverflow</code>：如果字段值大于 <code>max</code> 的值则返回true。</li> <li><code>rangeUnderflow</code>：如果字段值小于 <code>min</code> 的值则返回true。</li> <li><code>stepMisMatch</code>：如果字段值与 <code>min</code>、<code>max</code> 和 <code>step</code> 的值不相符则返回true。</li> <li><code>tooLong</code>：如果字段值的长度超过了 <code>maxlength</code> 属性指定的值则返回true。</li> <li><code>typeMismatch</code>：如果字段值不是 <code>"email"</code> 或<code>"url"</code> 要求的格式则返回true。</li> <li><code>valid</code>：如果其他所有属性的值都为false 则返回true。与<code>checkValidity()</code>的条件一致。</li> <li><code>valueMissing</code>：如果字段是必填的但没有值则返回true。</li> </ul> 因此，通过 <code>validity</code> 属性可以检查表单字段的有效性，从而获取更具体的信息，如下所示：<br /> <blockquote><code>if (input.validity && !input.validity.valid){ if (input.validity.valueMissing){ console.log("请指定值.") } else if (input.validity.typeMismatch){ console.log("请指定电子邮件地址."); } else { console.log("值无效."); } }</code></blockquote><br /> 禁用验证<br /> 通过指定 <code>novalidate</code> 属性可以禁止对表单进行任何验证：<br /> <blockquote><code><form method="post" action="/signup" novalidate></form></code></blockquote><br /> 也可以在 JavaScript 通过 <code>noValidate</code> 属性设置，为 <code>true</code> 表示属性存在，为 <code>false</code> 表示属性不存在：<br /> <blockquote><code>document.forms[0].noValidate = true; // 关闭验证</code></blockquote><br /> 如果一个表单中有多个提交按钮，那么可以给特定的提交按钮添加<code>formnovalidate</code> 属性，指定通过该按钮无需验证即可提交表单：<br /> <blockquote><code><form method="post" action="/foo"><input type="submit" value="https://www.it610.com/article/注册提交"> <input type="submit" formnovalidate name="btnNoValidate" value="https://www.it610.com/article/没有验证的提交按钮"> </form></code></blockquote><br /> 也可以使用 JavaScript 设置 <code>formNoValidate</code> 属性：<br /> <blockquote><code>// 关闭验证 document.forms[0].elements["btnNoValidate"].formNoValidate = true; </code></blockquote><br /> 总结 以上总结了 <code><input></code> 和 <code><textarea></code> 两个元素的一些功能，主要是 <code><input></code> 元素可以通过设置 <code>type</code> 属性获取不同类型的输入框，可以通过监听键盘事件并检测要插入的字符来控制文本框的内容。<br /> 还有一些与剪贴板相关的事件，并对剪贴的内容进行检测。还介绍了一些 HTML5 新增的属性和方法和新增的更多的 <code><input></code> 元素的类型，和一些与验证相关的属性和方法。<br /> <strong>【快速了解JavaScript的文本框操作】</strong>更多内容请关注公众号「海人为记」<br><img alt="快速了解JavaScript的文本框操作" onload="javascript:ImgReSize(this)" src="https://img.it610.com/image/info9/e03ce80427c7481da6a70ffa5aa3e0d9.jpg"/> <br /> 文章图片 <br /> <br /> </p> <div class="dede_pages"><ul></ul></div> <div class="pcd_ad"> <center><div class="_ahwullr0ac"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6834461", container: "_ahwullr0ac", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script></center> </div> <div class="mbd_ad"> <div style=margin-top:10px;margin-bottom:10px;> <div class="_i7aftr79jl"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u5950612", container: "_i7aftr79jl", async: true }); </script> <!-- ½űֻһ --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> </div> <h3>推荐阅读</h3> <ul class="post-loop post-loop-default cols-0"> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3862308.html" title="事例如何分析一篇通讯"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="事例如何分析一篇通讯" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3862308.html"> <b>事例如何分析一篇通讯 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1751855.html" title="空气炸锅炸的蛋糕多久能熟 空气炸锅炸的蛋糕多久能熟透"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="空气炸锅炸的蛋糕多久能熟 空气炸锅炸的蛋糕多久能熟透" src="http://img.readke.com/230424/113040CS-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1751855.html"> <b>空气炸锅炸的蛋糕多久能熟 空气炸锅炸的蛋糕多久能熟透 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3637819.html" title="redis基本常用的方法，redis基础用法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="redis基本常用的方法，redis基础用法" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3637819.html"> <b>redis基本常用的方法，redis基础用法 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3757205.html" title="安卓手机查看本机网关,wifi静态ip和dns怎么用?"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="安卓手机查看本机网关,wifi静态ip和dns怎么用?" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3757205.html"> <b>安卓手机查看本机网关,wifi静态ip和dns怎么用? </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0126429DH022.html" title="手表|上海江诗丹顿手表的保养方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="手表|上海江诗丹顿手表的保养方法" src="https://p0.ssl.img.360kuai.com/t01aebd046a363a1d64.jpg?size=960x380"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/0126429DH022.html"> <b>手表|上海江诗丹顿手表的保养方法 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3128185.html" title="封控区解封后黄码会变绿码吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="封控区解封后黄码会变绿码吗" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3128185.html"> <b>封控区解封后黄码会变绿码吗 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0PTO252021.html" title="切斯特·米尔顿·萨瑟姆|把癌细胞注射到健康人体内，会得癌吗？还真有科学家做了相关试验"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="切斯特·米尔顿·萨瑟姆|把癌细胞注射到健康人体内，会得癌吗？还真有科学家做了相关试验" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/0PTO252021.html"> <b>切斯特·米尔顿·萨瑟姆|把癌细胞注射到健康人体内，会得癌吗？还真有科学家做了相关试验 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2264044.html" title="黑法师的养殖方法 黑法师的养殖方法和注意事项无图片"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="黑法师的养殖方法 黑法师的养殖方法和注意事项无图片" src="http://img.readke.com/230526/234KML0-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2264044.html"> <b>黑法师的养殖方法 黑法师的养殖方法和注意事项无图片 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1014381.html" title="艾先生讲古之混乱之子Sons of Anarchy 混乱之子吧"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="艾先生讲古之混乱之子Sons of Anarchy 混乱之子吧" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1014381.html"> <b>艾先生讲古之混乱之子Sons of Anarchy 混乱之子吧 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3087833.html" title="梨水可以止咳化痰吗 冰糖梨水可以止咳化痰吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="梨水可以止咳化痰吗 冰糖梨水可以止咳化痰吗" src="http://img.readke.com/230830/05505B628-0-lp.png"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3087833.html"> <b>梨水可以止咳化痰吗 冰糖梨水可以止咳化痰吗 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2393379.html" title="辐射避难所怎么合并房子"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="辐射避难所怎么合并房子" src="http://img.readke.com/230602/16392445A-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2393379.html"> <b>辐射避难所怎么合并房子 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2709922.html" title="dnf刷图职业排行2020年10月 dnf95平民一线刷图职业"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="dnf刷图职业排行2020年10月 dnf95平民一线刷图职业" src="http://img.readke.com/230713/002Q45625-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2709922.html"> <b>dnf刷图职业排行2020年10月 dnf95平民一线刷图职业 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2941953.html" title="熟地黄怎么做汤"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="熟地黄怎么做汤" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2941953.html"> <b>熟地黄怎么做汤 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1316224.html" title="小型全身按摩器 – 小型手拿按摩器种类"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="小型全身按摩器 – 小型手拿按摩器种类" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1316224.html"> <b>小型全身按摩器 – 小型手拿按摩器种类 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1168409.html" title="枕头芯的种类有哪些"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="枕头芯的种类有哪些" src="http://img.readke.com/230227/0FQ52045-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1168409.html"> <b>枕头芯的种类有哪些 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2009134.html" title="花木兰的品质和精神 花木兰的品质和精神在哪里"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="花木兰的品质和精神 花木兰的品质和精神在哪里" src="http://img.readke.com/230510/023314O46-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2009134.html"> <b>花木兰的品质和精神 花木兰的品质和精神在哪里 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/120434YV2021.html" title="投稿|家装互联网，困于“局域网”？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="投稿|家装互联网，困于“局域网”？" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/120434YV2021.html"> <b>投稿|家装互联网，困于“局域网”？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1388986.html" title="眼线胶笔要怎么使用呢"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="眼线胶笔要怎么使用呢" src="http://img.readke.com/230403/1JG052C-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1388986.html"> <b>眼线胶笔要怎么使用呢 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2983332.html" title="给老人重阳节祝福语简短"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="给老人重阳节祝福语简短" src="http://img.readke.com/230812/1514293055-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2983332.html"> <b>给老人重阳节祝福语简短 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03144G1452022.html" title="react源码debugger之理解调度（使用react17版本）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="react源码debugger之理解调度（使用react17版本）" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/03144G1452022.html"> <b>react源码debugger之理解调度（使用react17版本） </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> </ul> <p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/021T5JV2022.html" title="我们重新了解付费。" target="_blank">我们重新了解付费。 </a></li> <li><a href="/c/021T5J292022.html" title="拍照一年啦，如果你想了解我，那就请先看看这篇文章" target="_blank">拍照一年啦，如果你想了解我，那就请先看看这篇文章 </a></li> <li><a href="/c/021T5IG2022.html" title="事件代理" target="_blank">事件代理 </a></li> <li><a href="/c/021T5H622022.html" title="C语言中的时间函数clock()和time()你都了解吗" target="_blank">C语言中的时间函数clock()和time()你都了解吗 </a></li> <li><a href="/c/021T5F552022.html" title="数组常用方法一" target="_blank">数组常用方法一 </a></li> <li><a href="/c/021T5E562022.html" title="操作系统|[译]从内部了解现代浏览器(1)" target="_blank">操作系统|[译]从内部了解现代浏览器(1) </a></li> <li><a href="/c/021T5C002022.html" title="生发知识，带你深入了解" target="_blank">生发知识，带你深入了解 </a></li> <li><a href="/c/021T564512022.html" title="了解自然大气粒子对气候的影响" target="_blank">了解自然大气粒子对气候的影响 </a></li> <li><a href="/c/021J550042022.html" title="带你了解类型系统以及flow和typescript的基本使用" target="_blank">带你了解类型系统以及flow和typescript的基本使用 </a></li> <li><a href="/c/021J54P62022.html" title="neo4j|neo4j cql语句 快速查询手册" target="_blank">neo4j|neo4j cql语句 快速查询手册 </a></li> </ul></p> <div class=entry-copyright> <p></p> </div> </div> <div class="entry-footer"> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis">上一篇：<a href='/c/11143231592021.html'>手记｜Android 获取已配对蓝牙列表和已连接蓝牙名称</a> </p> <p class="post-next fr ellipsis">下一篇：<a href='/c/11143231612021.html'>Android 国际化之多语言适配小记</a> </p> </div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_post_thumb"> <h3 class="widget-title"><span>更多...</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/01054096422022.html" title="《Android开发艺术探索》读书笔记----第一章（Activity的生命周期）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="《Android开发艺术探索》读书笔记----第一章（Activity的生命周期）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/01054096422022.html" title="《Android开发艺术探索》读书笔记----第一章（Activity的生命周期）">《Android开发艺术探索》读书笔记----第一章（Activity的生命周期）</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/010T1G922022.html" title="一年四班，张海天|一年四班，张海天 12月5日"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="一年四班，张海天|一年四班，张海天 12月5日" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/010T1G922022.html" title="一年四班，张海天|一年四班，张海天 12月5日">一年四班，张海天|一年四班，张海天 12月5日</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/10012614A2021.html" title="藏在梦乡里的男孩"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="藏在梦乡里的男孩" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/10012614A2021.html" title="藏在梦乡里的男孩">藏在梦乡里的男孩</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/110230Ca2021.html" title="每至清明"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="每至清明" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/110230Ca2021.html" title="每至清明">每至清明</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/02134495W2022.html" title="2021年行业社群孵化的分布式商业趋势"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2021年行业社群孵化的分布式商业趋势" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/02134495W2022.html" title="2021年行业社群孵化的分布式商业趋势">2021年行业社群孵化的分布式商业趋势</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/121135642R021.html" title="C++常量转换"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="C++常量转换" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/121135642R021.html" title="C++常量转换">C++常量转换</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/010J14K92022.html" title="观察者模式实现之EventBus(Google)"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="观察者模式实现之EventBus(Google)" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/010J14K92022.html" title="观察者模式实现之EventBus(Google)">观察者模式实现之EventBus(Google)</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z51540U2021.html" title="最后的冬天"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="最后的冬天" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0Z51540U2021.html" title="最后的冬天">最后的冬天</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z515ML2021.html" title="关于年少时的文学情怀"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="关于年少时的文学情怀" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0Z515ML2021.html" title="关于年少时的文学情怀">关于年少时的文学情怀</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/12143631362021.html" title="spring|@Data 注解"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="spring|@Data 注解" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/12143631362021.html" title="spring|@Data 注解">spring|@Data 注解</a></p> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> <!--<img src="/skin/images/logo-footer.png">--></div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li> <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li> </ul> <div class="copyright"> <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;"> <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true"> <use xlink:href="#wi-arrow-up-2"></use> </svg></i></div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <script>var _web_js={};</script> <script src="/skin/js/index.js"></script> </body> </html>
