html输入字段设置范围

时间:2013-10-07 10:55:15

标签: javascript jquery html input

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

更新

我需要IE的解决方案,所以html5解决方案类型=“范围”或类型=“数字”对我来说是无用的。 我唯一的代码是输入字段:

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

问题是:我是否必须使用onKeydown()检查每个角色,或者是否有更聪明的方法?

3 个答案:

答案 0 :(得分:0)

以下是您要找的内容:

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" />

答案 1 :(得分:0)

我部分猜测您的要求,但如果您只是想将输入值限制在特定范围内的数字,则可以使用HTML5的range input type

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

或使用JavaScript验证this demo fiddle中的值:

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");
}

或使用input pattern attribute验证正则表达式模式。

答案 2 :(得分:0)

这是我想要的解决方案:

$(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!!!");
            }
        }
    }
});
});