文本框编程

文本框

1. input

• size：指定文本框的宽度，以字符数来计量
• value：指定文本框的初始值
• maxLength：指定文本框允许的最多字符数

创建一个一次可显示 25 个字符，但最多允许显示 50 个字符的文本框

<input type="text" size="25" maxLength="50" value="init value" />

2. textarea

• rows：指定这个文本框的高度，以字符数计量
• cols：指定这个文本框的宽度，以字符数计量
• 在标签间定义初始值

<textarea rows="25" cols="5">init value</textarea>

选择文本

1. 选中全部文本

• select()：用于选中文本框中的全部文本，调用后自动将焦点设置到文本框

• 在文本框获得焦点时，选中所有文本，让用户方便修改是个常见的需求

  textbox.addEventListener('focus', e => {
      e.target.select()
  })

2. select 事件

• 当选中文本框文本时触发

3. 取得选中文本

• 非 IE 浏览器：通过 selectionStart 和 selectionEnd 得到选中文本的索引
• IE 浏览器：通过 document.selection

function getSelectedText(textbox) {
    if (typeof textbox.selectionStart === 'number') {
        return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)
    } else if (document.selection) {
        return document.selection.createRange().text
    }
}

4. 部分选中文本

• 通过 setSelectionRange(selectionStart, selectionEnd) 来选中部分文本
• 想看到有选中效果，需要在调用之前或之后给文本框设置焦点

输入过滤

1. 屏蔽字符（以屏蔽非数字字符举例）

• preventDefault() 会屏幕所有按键的输入
• 先检测输入的是否是数字
• 还要检测一些非字符键，综合考虑各个浏览器的情况，保证 charCode 大于 9 即可
• 不能按下 Ctrl 键，因为可能是复制、黏贴

textbox.addEventListener('keypress', e => {
    if (!/\d/.test(String.fromCharCode(e.charCode)) &&
        e.charCode > 9 &&
        !e.ctrlKey
       ) {
        e.preventDefault()
    }
})

2. 剪贴板

• 剪贴板事件

事件	说明
beforecopy	复制操作发生前触发
copy	复制操作发生时触发
beforecut	剪切操作发生前触发
cut	剪切操作发生时触发
beforepaste	黏贴操作发生前触发
paste	黏贴操作发生时触发

• 读写 clipboardDate 可以获取和设置剪贴板内容，这个属性在 window（IE）或 event（非IE）上，所以可以使用以下两个跨浏览器方法。只能在上面的事件中使用

function getClipboardText(event) {
    var cilpboardData = event.cilpboardData || window.cilpboardData
    return cilpboardData.getData('text')
}

function setcilpboardText(evenet, value) {
    if (event.cilpboardData) {
        return event.cilpboardData.setData('text/plain', value)
    } else if (window.cilpboardData) {
        return window.cilpboardData.setData('text', value)
    }
}

• 可以在 paste 事件上进行输入过滤，如果无效输入，就使用 preventDefault() 阻止输入

HTML5 约束验证

1. 必填字段

• 给表单字段设置 required 属性，带有此属性的字段必须有值，若无值则无法提交表单

可以通过以下代码检测浏览器是否适用

const isRequiredSipportted = 'required' in document.createElement('input')

2. 新的 type

• input 元素新增了 type 值，可以自动验证是否满足
• 验证文本：url、email
• 验证数值：number、range、datetime、datetime-local、date、month、week、time

3. 正则验证

• 为文本字段设置 pattern 属性，用于指定一个正则表达式，用户输入的文本必须与之匹配

4. 检测有效性

• 使用 checkValidity() 检测验证是否通过，可以在表单上使用，验证所有字段，也可以在某个字段上使用

  if (document.form[0].checkValidity()) {} 
  else {}

• 使用 validity 对象属性获取字段为什么有效或无效，其上有一串布尔值属性

属性	说明
customError	如果设置了 setCustomValidity() 则返回 true，否则返回 false
patternMismatch	如果字段值不匹配指定的 pattern 则返回 true
rangeOverflow	如果字段值大于 max 的值则返回 true
rangeUnderflow	如果字段值小于 min 的值则返回 true
stepMisMatch	如果字段值与 min、max 和 step 的值不相符则返回 true
tooLong	如果字段值的长度超过了 maxlength 属性指定的值则返回 true
typeMismatch	如果字段值不是 email 或 url 要求的格式则返回 true
valid	如果其他所有属性的值都为 false，则返回 true
valueMissing	如果字段是必填的但没有值则返回 true

if (input.validity && !input.validity.valid) {
    // 没通过
    if (input.validity.valueMissing) {
        console.log('请输入值')
    }
}