HTML 输入字段设置范围

html input field set range

本文关键字：范围 设置 字段 输入 HTML      更新时间：2023-09-26

将输入字段的范围设置为 -100.0 到 100.0 的最有效方法是什么？我想检查每个字符。除 -、0、1、2、3、4、5、6、7、8、9 和 以外的其他字符。是不允许的。没有浮点数的值，例如 78，也是可能的。

更新

我需要IE的解决方案，因此类型="范围"或类型="数字"的html5解决方案对我来说毫无用处。我唯一的代码是输入字段：

<input type="text" id="zahlenwert" value="" />

问题是：我是否必须使用 onKeydown（） 检查每个字符，或者有更聪明的方法？

以下是您要查找的内容：

http://jeroenvanwarmerdam.nl/content/resources/javascript/jquery/spincontrol/jquery-spincontrol-1.0.zip

这是一个例子：

http://jeroenvanwarmerdam.nl/content/resources/javascript/jquery/spincontrol/jquery-spincontrol.html?x=31&y=10

集成：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-numeric.js"></script>
<script type="text/javascript" src="jquery-number-selector.js"></script>
<script type="text/javascript" src="jquery-spincontrol-support.js"></script>
<script type="text/javascript" src="jquery-spincontrol.js"></script>
<!-- SpinControl definition -->
<script type="text/javascript">
(function($) {
    $(function() {
        $(":number").addClass("number").spinControl({ folder: "images/" });
    });
})(jQuery);
</script>

这是您的正文 html 代码：

<input type="number" max="10" min="-10" step="0.5" />

我部分猜测您的要求，但如果您只是尝试将输入值限制为特定范围内的数字，则可以使用 HTML5 的范围输入类型：

<input type="range" name="myrange" min="-100" max="100">

或者使用 JavaScript 来验证值，就像这个演示小提琴一样：

document.getElementById('test').onchange = isNumber;
function isNumber(){
    var val = this.value;
    var aNumber = !isNaN(val);
    var aNumberNotOverOneHundred = (Math.abs(parseFloat(val, 10)) <= 100);
    alert((aNumber && aNumberNotOverOneHundred)?"Yarp":"Narp");
}

或者使用输入模式属性来验证正则表达式模式。

这是我想要的解决方案：

$(document).ready(function() {
$("input#zahlenwert").keyup(function(){
    var zahlenwert= $("input#zahlenwert").val();
    var status = 0;
    for(i=zahlenwert.length;i>0;i--){
        if(status==0){
            if(zahlenwert.length == 0){
            }
            else if(zahlenwert.length == 1 && zahlenwert.match(/^(-|[0-9]) /)!=null){
                status = 1;
                console.log("zahlenwert ok");
            }
            else if(zahlenwert.length == 2 && zahlenwert.match(/^(-[0-9]|[0-9],|[1-9][0-9])/)!=null){
                status = 1;
                console.log("zahlenwert ok");
            }
            else if(zahlenwert.length == 3 && zahlenwert.match(/^(-[1-9][0-9]|[0-9],[0-9]|100|[1-9][0-9],|-[0-9],)/)!=null){
                status = 1;
                console.log("zahlenwert ok");
            }
            else if(zahlenwert.length == 4 && zahlenwert.match(/^(-100|100,|[1-9][0-9],[0-9]|-[0-9],[0-9]|-[1-9][0-9],)/)!=null){
                status = 1;
                console.log("zahlenwert ok");
            }
            else if(zahlenwert.length == 5 && zahlenwert.match(/^(100,0|-100,|-[1-9][0-9],[0-9])/)!=null){
                status = 1;
                console.log("zahlenwert ok");
            }
            else if(zahlenwert.length == 6 && zahlenwert.match(/^-100,0/)!=null){
                status = 1;
                console.log("zahlenwert ok");
            }
            else{
                zahlenwert = zahlenwert.substring(0,zahlenwert.length-1);
                $("input#zahlenwert").val(zahlenwert);
                console.log("Error!!!");
            }
        }
    }
});
});
相关文章：