文本框编程.md

文本框编程

文本框两种表示方式：单行使用 <input>，多行使用 <textarea>

• <input> 元素显示为文本框，省略 type 属性会以 text 作为默认值。宽度是以字符来计算的
  • 使用 size 可以指定文本框一次的显示数量
• <textarea> 元素会创建多行文本框
  • rows 指定的是文本框的高度，以字符数计算
  • cols 指定的是文本框的宽度，类似于 size 属性
  • 并且 textarea 不能显示最大允许的字符数量 maxlength

showPicker()

showPicker() 方法可以在没有点击行为触发的情况下，让部分自带交互面板的 input 输入框显示这些交互层

<input id="date" type="color">
<button id="button">日期</button>
<script>
  button.addEventListener('click', function () {
    date.showPicker();   
  });
</script>

选择文本

<form action="">
  <input type="text" size="25" value="xxxxxxxxxxxxxxxxxxx" name="text">
</form>

两种文本框都支持一个 select() 的方法，此方法用于全部选中文本框的文本。

• 并且大多数浏览器都支持在调用 select() 方法后将焦点设置到文本框中
• 并且这样做可以让用于一次性删除所有的默认内容

const text = document.forms[0].elements.text
text.addEventListener("focus", (e) => {
  event.target.select()
})

select事件：当选中文本时就会触发 select 事件

text.addEventListener("select",()=>{
  console.log("选中文本就会触发")
})

取得选中文本

• HTML5 为文本框添加了两个属性 selectionStart 和 selectionEnd，分别表示文本选区的起点和终点的偏移量

text.addEventListener("select", (e) => {
  console.log(text.value.substring(text.selectionStart, text.selectionEnd))
})

输入过滤

屏蔽字符，keypress 事件负责向文本框插入字符，可以使用默认事件来阻止默认字符的插入

//只能打印数字
text.addEventListener("keypress", (event) => {
  if (!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) {
    event.preventDefault()
  }
})

• String.fromCharCode(event.charCode)：打印 UTF-16 代码单元的数字转化为字符
• event.charCode：打印相应的字符编码

剪贴板事件

• beforecopy：复制操作发生前事件

• copy：复制操作时发生事件

• beforecut：剪切操作发生前事件

• cut：剪切操作时发生事件

• beforepaste：粘贴操作发生前触发

• paste：粘贴操作发生时触发

• 剪贴板事件可以通过 event 对象上的 clipboardData 对象来获取数据。并且返回值是一个 DataTransfer

• clipboardData 上有三个主要的方法

  1. getData()：从剪贴板检索字符串数据，并接收一个参数，该参数必须是 MIME 类型
  2. setData()：第一个参数是指定数据类型，第二个参数，是要放到剪贴板的数据
  3. clearData()：清除这些数据

text.addEventListener("paste", function (e) {
  const text = e.clipboardData.getData('text/plain')
  if (/\d*$/.test(text)) {
    e.preventDefault()
  }
})

自动切换：当文本框达到最大允许的字符的时候就会自动换入下一行

<form action="">
  <input type="text" maxlength="3" id="input1">
  <input type="text" maxlength="3" id="input2">
  <input type="text" maxlength="3" id="input3">
</form>
<script>
  function tabDorWord(e) {
    if (e.target.value.length === e.target.maxLength) {
      let form = e.target.form
      for (let i = 0; i < form.elements.length; i++) {
        if (form.elements[i] === e.target && form.elements[i + 1]) {
          form.elements[i + 1].focus()
          return
        }
      }
    }
  }
  let arr = ["input1", "input2", "input3"]
  for (let i = 0; i <script arr.length; i++) {
    document.getElementById(arr[i]).addEventListener('keyup', tabDorWord)
  }
</script>

HTML5 约束验证 API

验证

• required：必填字段。该属性的字段必须有值，否则无法提交表单
• pattern：需要验证的正则规则
• maxlength 和 minlength：限定 input 最大输入长度和最小输入长度
• min 和 max：指定数字输入类型的最小值和最大值
• invalid：提交的input元素的值为无效值时，触发 oninvalid 事件

css伪类

• :default：表示一组相关元素中的默认表单元素。
  • 该选择器可以在 <button>、<input type="checkbox">、<input type="radio">以及 <option> 上使用
• :enabled:启用状态.表示任何被启用的（enabled）元素。如果一个元素能被激活（选择、点击、接收文本等），或者能够获取焦点。
  • 如果元素处于禁用状态（:disabled status），元素不能激活获取焦点
• :disabled:禁用状态。表示一个不能被激活的元素。如果一个元素不能被激活（选择、点击、接收文本等），或者不能够获取焦点。
  • 如果该元素处于启用状态（enabled status），元素可以被激活或自动获取焦点
• :checked:表示任何处于选中状态的（<input type="radio">），checkout（<input type="checkout">）或者 <select> 元素中的 option HTML 元素
• :placeholder-shown：CSS 伪类在 <input> 或 <textarea> 元素显示 placeholder text 时生效
• :required：表示任意设置了 required 属性的 <input>、<select>、<textarea>元素
• :valid：验证内容正确。将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式
• :invalid：验证内容未通过 <input> 或者其他 <form>
• :optional：表示任意没有 required 属性的 <input>、<select>、<textarea> 元素
• :in-range：表示一个 <input> 元素当前值属于 min和 max 限定的范围内
• :out-of-range：表示 <input> 元素处于属性 min 和 max 限定的范围外
• :read-only：CSS伪类表示元素不可被用户编辑的状态（如锁定的文本输入框）
  • 这个选择器不只是选择具有 readonly 属性的 <input> 元素，它也会选择所有的不能被用户编辑的元素
• :read-write：CSS伪类代表一个元素（例如可输入文本的 input 元素）可以被用户编辑
  • 这个选择器不仅仅选择 <input> 元素,它也会选择所有可以被用户编辑的元素，例如设置了 contenteditable 属性的 <p> 元素

检测有效性(属性)

1. validationMessage：描述元素不满足校验条件时（如果有的话）的文本信息
   • 如果元素无需校验（willValidate 为 false），或元素的值满足校验条件时，为空字符串
2. validity：DOM 接口 ValidityState 代表一个元素可有的有效性状态（validity states）其与约束验证（constraint validation）相关。并且全部是只读属性
   • badInput：布尔值，true 表示用户提供了浏览器不能转换的输入
   • customError：布尔值，表示这个元素的自定义验证信息是否已通过调用元素 setCustomValidity() 方法设置为一个非空字符串
   • patternMismatch：布尔值，如果为 true 表示元素值不匹配规定的 pattern，并且可用 css 伪类 :invalid 匹配
   • rangeOverflow：布尔值，true 表示值已超过 max 属性规定的最大值，并且可以匹配 CSS 伪类 :invalid 和 :out-of-range，false 则表示小于或等于这个最大值
   • rangeUnderflow：布尔值，true 表示值小于 min 属性规定的最小值，并且可以匹配 CSS 伪类 :invalid 和 :out-of-range，false 则表示大于或等于这个最大值
   • stepMismatch：布尔值，true 表示值不符合由 step 属性规定的规定，可用 CSS 伪类 :invalid 和 :out-of-range 匹配。false 表示其符合步长值规则。
   • tooLong：布尔值，true 表示值超过了 HTMLInputElement 或 HTMLTextAreaElement 对象中规定的 maxlength，可用 CSS 伪类 :invalid 和 :out-of-range 匹配，false 表示值的长度小于或等于最大长度
     • 注意：这个属性在 Gecko 中永远不会是 true，因为元素值不允许比 maxlength 长
   • tooShort：布尔值，true 表示值的长度小于 HTMLInputElement 或 HTMLTextAreaElement 对象中规定的 minlength，可用 CSS 伪类 :invalid 和 :out-of-range 匹配，false 表示值的长度大于或等于最大长度
   • typeMismatch：布尔值，true 表示元素值不满足所需的格式（可见于 type 是 email 或 url 时），可用 CSS 伪类 :invalid 和 :out-of-range 匹配，false 表示格式正确
   • valid：布尔值，true 表示元素满足所有的验证约束，并且可用 CSS 伪类 :invalid 和 :out-of-range 匹配，false 表示有任一约束不满足
   • valueMissing：布尔值，true 表示元素拥有 required 属性，但没有值，可用CSS伪类 :invalid 和 :out-of-range 匹配
3. willValidate：如果元素在表单提交时将被校验，返回 true，否则返回 false。false 代表表单无需校验

检测有效性（方法）

1. checkValidity()：如果元素的值不存在校验问题，返回 true，否则返回 false。如果元素校验失败，此方法会触发 invalid 事件
2. HTMLFormElement.reportValidity()：如果元素或它的子元素控件符合校验的限制，返回 true
   • 当返回为 false 时，对每个无效元素可撤销 invalid 事件会被唤起并且校验错误会报告给用户
3. setCustomValidity(message)：HTML5 内置的 JS 方法，用来自定义错误提示信息

<style>
  input:invalid {
    border: red solid 3px;
  }
</style>
<form action="">
  <input type="text" title="格式错误" name="userid" required pattern="\d{6,10}">
  <input type="submit">
</form>
<script>
  const input = document.getElementsByTagName('input')[0]
  input.oninvalid = (e) => {
    if (input.validity.patternMismatch) {
      input.setCustomValidity("请输入6-10位数字")
    }
  }
</script>