input的type为number时，去除右边箭头，限制负数和字数

最新推荐文章于 2022-04-24 18:24:19 发布

没错，我就是

最新推荐文章于 2022-04-24 18:24:19 发布

阅读量363

点赞数

文章标签： html javascript css jquery

本文链接：https://blog.csdn.net/qq_42755622/article/details/104277534

版权

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*去除input的type为number的右边上下箭头*/
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body>
    <!--没有父元素的时候
    <input type="number" name="num" />
    <input type="number" name="num2" />-->

    <!--有父元素的时候-->
    <div id="d1">
        <input type="number" name="num" />
        <input type="number" name="num2" />
    </div>

    <script>
        //没有父元素的时候
        //(function () {
        //    //获取name名字对应的input
        //    var number = document.getElementsByName("num")[0],
        //        number2 = document.getElementsByName("num2")[0];

        //    //添加事件监听对象，限制最大字数，去除-号
        //    //number.addEventListener("input", function () {
        //    //    this.value = this.value.replace(/\-/, "");
        //    //    if (this.value.length > 2) { this.value = this.value.slice(0, 2) };
        //    //});
        //    //      当事件发生时: e自动收到浏览器给的event对象
        //    //number2.addEventListener("input", function (e) {
        //    //      记录了事件最初触发的目标元素
        //    //    e.target.value = e.target.value.replace(/\-/, "");
        //    //    if (e.target.value.length > 5) { e.target.value = e.target.value.slice(0, 5) };
        //    //});

        //    number.oninput = function () {
        //        //去除负号
        //        this.value = this.value.replace(/\-/, "");
        //        //限制字数
        //        if (this.value.length > 2) { this.value = this.value.slice(0, 2) };
        //    };
        //    number2.oninput = function () {
        //        this.value = this.value.replace(/\-/, "");
        //        if (this.value.length > 5) { this.value = this.value.slice(0, 5) };
        //    };
        //})();


        //有父元素的时候
        (function () {
            var number = document.getElementsByName("num")[0],
                number2 = document.getElementsByName("num2")[0];
            //多个平级子元素，要绑定相同的时间处理函数，只要绑定父元素即可
            d1.oninput = function (e) {
                e.target.value = e.target.value.replace(/\-/, "");
            };

            number.oninput = function () {
                //限制字数
                if (this.value.length > 2) { this.value = this.value.slice(0, 2) };
            };
            number2.oninput = function () {
                if (this.value.length > 5) { this.value = this.value.slice(0, 5) };
            };
        })()
    </script>
</body>
</html>

没错，我就是

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input的type为number时，去除右边箭头，限制负数和字数

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> /*去除input的type为number的右边上下箭头*/ input::-webkit-outer-spin-bu
复制链接

扫一扫