你不知道的 HTML 表单新特性.png
现在这年头，不要说 HTML ，就是 HTML5 我相信大家都很熟悉了，但是对于 HTML5 我最近有发现了一点新的东西，比较碎，来看看你知不知道。
准确获取用户输入的数字
表单获取用户输入的数字，我相信你马上就能写出以下代码：
<input type="number" />
但是这行代码有缺点，获取用户输入的数字并不是数字，而且文本，专业点讲就是字符串，看测试例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="number" id="ipt" />
<script>
ipt.oninput = function (e) {
const val = e.target.value;
console.log(typeof val, val);
}
</script>
</body>
</html>
演示效果图：
平时我们都是通过这种思路来获取用户的输入，如果想要纯数字也不是没有办法，加个 parseFloat 就行了，即：
const val = Number.parseFloat(e.target.value);
// 高级点还阔以这样写
const val = +e.target.value;
但是现在我们不用这么麻烦，直接把 value 替换成 valueAsNumber（valueAsNumber 生效的必要条件是 type = number） ，即：
const val = e.target.valueAsNumber;
e.target.valueAsNumber 相比 e.target.value（尤其是带加号的） 也没啥直接的好处，最大的好处可能就是直接点。
即将全选的复选框
下图就是浏览器 checkbox 默认支持的三种状态，这种原生的复选框，第一种第二种我相信你常常见到，但是第三种你可能就不太了解了。
那它怎么弄出来的呢，很简单，一个属性就搞定了，来看源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" checked="true" />
<input type="checkbox" />
<input type="checkbox" id="ckb" />
<script>
ckb.indeterminate = true;
</script>
</body>
</html>
发现了吧，没错就是 indeterminate 来控制的，这个东西我们在 UI 类的框架中，见到的不少，checkbox 实现全选功能，但它们都稍微改了样式。
例如 Element-UI 长下面这样：
https://element.eleme.cn/#/zh-CN/component/checkbox#indeterminate-zhuang-tai
Antd 的长这样：
https://ant.design/components/checkbox-cn/
从形状来看，虽然 Element-UI 更贴合原生，但感觉 Antd 的最好看。
如何获取单选/复选框的初始状态
不多说，看代码和演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input name="radio" type="radio" checked="true" id="radio" />
<input name="radio" type="radio"/>
<input name="radio" type="radio" />
<button id="btn">获取第一个单选的初始状态</button>
<script>
btn.onclick = function () {
console.log(radio.defaultChecked);
};
</script>
</body>
</html>
浏览器打开页面渲染成这样：
一顿乱点之后，单选变成这样：
此时点击按钮获取第一个单选的默认状态，控制台输出：
快捷虚拟键盘
这个功能在移动端上才能有效，在手机上我们在 type="text" 的输入框中输入文本，会弹出如下的标准键盘。
1791619165617_.pic.jpg
在 type="number" 的输入框则会弹出如下数字简单，type="tel" 可以直接呼叫等等，这些表单可以说是非常的好用。
1801619165661_.pic.jpg
但更好用的来了，inputmode 可以对弹出的键盘，进行更加颗粒化的控制，例如对搜索框和 URL 输入框的优化，让需要用到的按键直接显示出来。
但是这个特性使用场景非常少，更多参见：inputmode
当前时间 Friday, April 23, 2021 17:15:59
网友评论