HTML5 – input 框中的新增功能

简介

在 Html 5 中，input更新了比较多的属性，也比较实用，本文列举input中在html5中的新增元素内容

新增元素

新增属性类

placeholder 提示文本

placeholder 是指输入框中，当未输入任何内容时提示的内容

<input type="text" placeholder="请输入内容">

autofocus 自动获取焦点

autofocus 会在页面打开时自动获取焦点

<input type="text" placeholder="请输入内容" autofocus>

autocomplate 自动完成输入提示

autocomplate 指的是当你提交过表单时，下次再填写，输入框会自动弹出提交记录

on: 打开提示

off: 关闭提示

注意：

1.必须成功提交过表单

2.当前添加 autocomplate 的元素必须有 name 属性

<input type="text" autocomplete="on" name="username">

新增表单类

tel 手机号

input 提供 type="tel" 类型的表单，其表单和普通表单没大的区别：

1.不进行表单验证。

2.用于在移动端能够弹出数字键盘

3.required 的作用为必须输入,如果没有输入则会阻止当前数据提交

4.pattern 的作用是正则表达式验证

<input type="tel" required pattern="^(\+86)?1\d{10}$">

number 数字

数字可以阻止用户输入 数字和小数 以外的其它内容，也可触发手机端的数字键盘

<input type="number" max="100" min="0" value="20">

date 日期

date 可以提供直接选择日期的选项，date 只提供日期选项，不提供时间选项

<input type="date" name="date">

datetime 日期时间

datetime 可以提供日期和时间的选择，但这个日期时间在 iOS 系统下不支持

<input type="datetime" name="time">

datetime-local 日期时间

为了支持 iOS 系统下的日期时间选项，专门开发出 datetime-local 日期时间类型

<input type="datetime-local" name="time">

url 网址

input 提供 url 类型的表单，表单包含验证功能

1.需要提供 http:// 或 https:// 开头的文本验证

<input type="url" name="url"

file 文件

file 文件的表单，支持多文件选择等功能

1.multiple 表示表单可以选择多个文件

<input type="file" name="photo" multiple>

email 邮箱

email 表单带有验证功能，还可以验证多个邮箱

1.email 有默认验证

2.multiple 允许输入多个邮箱地址，用“,”逗号分隔

<input type="email" name="email" multiple>

form 跨域提交

一般来说，我们要把 input 表单提交出去，通常需要包含在 form 提交表单中，Html5提供了一种新的方法，可以在 input 表单不在 form 表单中也能提交数据。

1.form 表单一定要定义 id,在input中定义 form 属性，值为 form 的 id 名，即使 input 不在 form 表单域内，也可提交数据

<input type="text" name="foo" form="formNamr">

datalist 辅助列表*

通常的 input 框中只有一个输入框，又或者使用 select 框中的下拉框，但是这两者都有一个缺上，它们互相不能实现对方的功能，即 input 不支持下拉，select 下拉框不支持自义文本。

html5 新增了 datalist 辅助列表，可以让 input 框包含 select 功能。

此功能支持度不高，不建议使用

实现方法：

<input type="text" id="username" list="useropt">
<datalist id="useropt">
  <option value="tzming" label="用户名"></option>
  <option value="pic****@qq.com" label="邮箱"></option>
  <option value="13*****2721" label="手机号" />
</datalist>

datalist 需要定义一个 id 名，input 框中指定 list 属性，值是 datalist 的 id 名即可。

meter 度量器

度量器是指一个数值的指标，它定义了 max 最大值，min 最小值，high 高值，low 低值 4个参数值

<meter max="100" min="0" high="80" low="40" value="30"></meter>

当值是 30 时，定义了 low 值为40,此时度量器指示 低值

<meter max="100" min="0" high="80" low="40" value="60"></meter>

当值在 40 和 80 之间的定为合适值

<meter max="100" min="0" high="80" low="40" value="90"></meter>

当值大于定义high值 80 后，定为高值

和度量器相关的 progress 进度条

<progress max="100" min="0" value="70"></progress>

新增事件类

oninput

input 元素新增一个 oninput 事件监听，其作用是当输入框存在增加或删除内容时，会触发事件调用

<input type="text" id="username">

document.getElementById("username").oninput = function(){
  console.log("oninput")
}

当表单出现输入和输出时，方法将被触发

与 onkeyup 的区别：

onkeyup 是指键盘抬起时触发，这样就会有两种不一样的情况

1.当通过鼠标复制粘贴内容时，oninput 触发，onkeyup 不触发

2.当通过键盘 Ctrl + V 粘贴内容时，oninput 触发一次，onkeyup 触发两次，因为 onkeyup 检查到 Ctrl 键和 V 键抬起。

oninvalid

oninvalid 是当验证不能过时触发，上面已知，有一些表单是包含验证的（如 email）,当验证不通过时即会触发。

document.getElementById("username").oninvalid = function(){
  console.log("验证不通过")
}

修改验证失败时的话术文案

使用 this.setCustomValidity() 方法修改

document.getElementById("username").oninvalid = function(){
  this.setCustomValidity("请输入邮箱")
}