这篇文章的主要目的是介绍表单相关的知识,如表单基础知识、文本框脚本相关用法、选择框脚本相关用法以及等知识。虽然在现代 web 开发中,很少会使用 form 默认行为提交表单数据,而是会禁用默认行为,然后使用 Ajax 方式通过 POST 请求异步提交表单数据。但是这并不代表 form 表单不重要了。form 表单仍然是提交表单最快的方式,因为 JavaScript 提供了许多属性和方法让我们快速获取表单字段的值。所以,对 form 的理解和掌握还是很有必要的。
获取 html 中的 Form 标签可以通过 id、class、name 属性获取,或者直接通过 form 标签获取。当然,也可以使用
获取 HTML 中所有表单元素,会返回一个 NodeList 对象。
- document.forms
说一个重要的
elements:
返回类数组对象,包含该 form 表单下所有表单字段。可以通过表单字段的 name 属性或者索引访问.
- document.forms[0].elements
- let form = document.forms[0]
- form.element[0] === form.element['index-0']
在 form 表单上的方法有 submit、reset 方法。在现代 web 开发中,都会阻止 form 表单提交的默认行为。当没有参数时,可以在不点击按钮的情况下将所有表单字段的值向服务器提交数据。通常,存在以下三种按钮可以提交表单数据。
- <input type="submit" value='提交' />
- <button type='submit'>提交</button>
- <input type="image" src='pic.png' />
submit: 当给 form 表单绑定 submit 事件,在点击图像按钮或者 type 为 submit 的按钮会提交表单数据。此时可以通过事件对象阻止表单全局提交的默认行为。在提交表单时,为避免用户多次点击导致多次提交的问题,可以在提交后禁用提交按钮。
都比较简单,有如下:
。支持此事件的浏览器包括 IE10+、Chrome、Firefox。所以支持的浏览器的 autofocus 会返回 true,不支持时会返回空字符串。
- <input type="text" autofocus />
focus()、blur():通常会结合 blur 方法使用。比如在 DOMContentLoaded 事件之后让某个 input 元素获得焦点,让用户可以直接输入。
- document.addEventLitener('DOMContentLoaded', e = >{
- let input = docuemnt.querySelector('.input-1') input.focus()
- },
- false)
focus、blur 事件:在实际业务中,可以结合使用 focus 和 blur 事件。如 input 节点获得焦点时,改变 input 元素颜色。在失去焦点时,将背景颜色重置。
- let input = document.querySelector('.input-0') input.addEventListener('focus', e = >{
- e.target.style.backgroundColor = '#ccc'
- },
- false) input.addEventListener('blur', e = >{
- e.target.style.backgroundColor = '#fff'
- },
- false)
change 事件:对于 input 和 textarea 元素,当它们从获得焦点到失去焦点并且 value 值发生改变时,才会触发 change 事件。而对于 select 元素,只要 value 值发生改变时就会触发 change 事件。换句话说,没有失去焦点也会触发 change 事件。这个细节需要注意。
除了以上表单字段的共有属性和方法之外,文本框存在自己的一些属性和操作文本的一些方法。
- // type为number时,可以指定min,max,step(表示某个值得倍数)属性
- < input type = "number"min = '0'max = '100'step = '5'name = 'count' >
- // 此时正则默认添加了^, $,即以下正则等于'^\d+$'
- < input type = 'text'pattern = '\d+' >
1.select 方法:input 和 textarea 元素都支持 selct 方法。这个方法不接受任何参数,表示选择某个文本框元素的所有文本
- // 当input元素获得焦点是选择文本
- let input = document.querySelector('.input-1') input.addEventListener('focus', e = >{
- e.target.select()
- },
- false)
2.setSelectionRange 方法:这个方法用于选择部分文本内容。接受两个参数,起始位置和结束位置。HTML5 新增的方法。IE9 + 以上浏览器支持。
- // 当input获得焦点时,选择文本中的第二个值
- let input = document.querySelector('.input-1')
- input.addEventListener('focus', e => {
- let target = e.target
- console.log(target.setSelectionRange(1, 2))
- }, false)
3.select 事件:当文本框元素中的文本被选中时,就会触发 select 事件。只要选中文本就会触发,不需要全选。
4.selectionStart, selectionEnd 属性:这两个属性用于或者用户选中的文本内容。因此,可以与 select 事件结合使用,获取用户选中的文本内容。HTML5 新增的两个属性。IE9 + 以上浏览器支持。
- let input = document.querySelector('.input-1')
- input.addEventListener('select', e => {
- let target = e.target
- let start = target.selectionStart
- let end = target.selectionEnd
- console.log(target.value.slice(start, end))
- }, false)
文本框的过滤输入主要是某些文本的输入是有条件的。比如说需要 input 元素中只允许输入数字。这时候就需要用到文本的过滤。基本思路如下
1. 通过监听 keypress 事件,判断输入时的字符是否是数字。通过 charCode 判断。keypress 事件会在用户按下键盘上的【字符键】时触发。
2. 如果不是,则取消默认行为,即取消文本的输入。
- let input = document.querySelector('.input-1') input.addEventListener('keypress', e = >{
- let charCode = e.charCode
- if (!/[\d+.+-]/g.test(String.fromCharCode(charCode))) {
- e.preventDefault()
- }
- },
- false)
此方法通过 charCode 属性来判断用户输入的字符是否是数字字符,如果是则可以输入,如果不是则禁止输入。这里要注意的是,不能通过 input 的 value 属性来判断。因为 keydown 和 keypress 事件会在 value 改变之前触发,而 keyup 事件则是在 value 发生改变之后触发。因此,keypress 获取 value 值是上一次的值,但是 keypress 事件可以获取到按下键盘时的 charCode 属性,然后通过 String 对象的 fromCharCode 转成对应的字符,根据此字符做一次正则验证即可。同时,charCode 属性只有在 keypress 事件才存在,在 keydown 和 keyup 事件中都会返回 0。
这种应用主要用于手机号码上。如手机号码可以分为'334'的结构。因此可以创建三个 input,当输入完毕时自动切换焦点到下一个 input 上。
- // 必须设置最大值
- <input type="text" name='text1' maxlength="3">
- <input type="text" name='text2' maxlength="3">
- <input type="text" name='text3' maxlength="4">
- // 当value的length等于maxleng时,发生跳转
- function judge (len, max, target, form) {
- if (len === max) {
- let length = form.elements.length
- for (let i = 0; i < length; i++) {
- if (target === form.elements[i]) {
- if (form.elements[i + 1]) {
- form.elements[i + 1].focus()
- }
- }
- }
- }
- }
- // 给三个input绑定keyup事件,通过事件代理方式。
- document.addEventListener('keyup', e => {
- let target = e.target
- let form = target.form
- let len = target.value.length
- let maxLen = target.maxLength
- switch (target.name) {
- case 'text1':
- judge(len, maxLen, target, form)
- break
- case 'text2':
- judge(len, maxLen, target, form)
- break
- case 'text3':
- judge(len, maxLen, target, form)
- break
- }
- }, false)
选择框是通过 select 和 option 元素组合而成的。除了表单字段共有的属性和方法之外,在这两个元素上提供了其他的属性和方法。目的是为了更加方便的操作选择框元素。
来源: http://www.cnblogs.com/unclekeith/p/7352082.html