你不知道的 HTML 表单新特性

2021-04-23 本文已影响0人 CondorHero

你不知道的 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>

浏览器打开页面渲染成这样：