首页 > 解决方案 > 为输入类型添加验证,因此不允许用户输入除具有最小值和最大值的数字以外的任何内容

问题描述

我现在正在尝试在 HTML 中执行此操作,我有一个输入字段type=number,我不希望用户能够输入十进制值/特殊字符/字母。我也想要min=30andmax=300所以如果用户键入29并单击 else where ,该字段中的值应该更改为minwhich is 30。如果用户输入的值大于300并在其他地方单击,那么我希望将该值更改为300最大值。我不想等待用户等待他们点击表单按钮。这是我到目前为止所拥有的,错误在于,用户仍然可以输入小数,并输入任何低于 30 的值。对 html/js 来说非常新。如果您认为这更容易,请随时帮助我实现 js。

<input type="number" min="30" max="300" step="1" oninput="validity.valid||(value=value.replace(/\D+/g, ''))" id="seconds" name="seconds" value="30">

标签: javascripthtmlcss

解决方案


<html>

<script>

    function change(){

        var inp  = document.getElementById("box").value;
        
            inp = Math.floor(inp);  
            if(inp<30){

            document.getElementById("box").value = 30;

        }

            else if(inp>300){

            document.getElementById("box").value = 300;

        }
        else {
            document.getElementById("box").value = inp;
        }
    }

                

</script>

<身体>

<input type= "number" onmouseout = "change()" id ="box"/>

</正文>

</HTML>

这个java脚本应该使用“ onmouseout ”。


推荐阅读