input[type=number]只能输入数字、小数点，禁止e/E

最新推荐文章于 2025-03-03 18:23:59 发布

Jimmia

最新推荐文章于 2025-03-03 18:23:59 发布

阅读量3.5k

点赞数 1

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/xiejm2333/article/details/114373659

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在JavaScript中处理input[type=number]元素，禁止用户输入e或E来表示指数。当使用原生的input[type=number]时，允许输入e/E可能导致值渲染错误。解决方案是通过监听input事件，比较当前输入值(data)和上次值(_lastValue)，从而阻止e/E的输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

原生input元素，当type=number的时候，允许输入数字、小数点、e(表示指数)。当输入10e的时候，去获取值的时候，会渲染不正确。此时会考虑禁用e/E。

实现

思路

监听keypress事件，中文输入法无效。

所以监听input事件，data表示此刻输入值，_lastValue表示上次的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="number" id='min'>
    <script>
        min.addEventListener('input', function (e) {
            if (e.data === 'e' || e.data === 'E') {
                this.value = this._lastValue || "";
            } else {
                // 此处需考虑中文输入法情况下，shift+EE(多个E)的情况
                typeof this.value !== 'undefined' && this.value.length > 0 && (this._lastValue = this.value);
            }
        });

        // 批量设置
        // document.querySelectorAll('input[type=number]').forEach(function (item) {
        //     item.addEventListener('input', function (e) {
        //         if (e.data === 'e' || e.data === 'E') {
        //             this.value = this._lastValue || "";
        //         } else {
        //             // 此处需考虑中文输入法情况下，shift+EE(多个E)的情况
        //             typeof this.value !== 'undefined' && this.value.length > 0 && (this._lastValue = this.value);
        //         }
        //     });
        // });
    </script>
</body>

</html>