Question

我想将类型为number的html5输入字段限制在1-999.99范围内。我尝试了这个，由于某种原因，它没有用。

<input id="amount" class="formField" type="number" step="any" style="width:100%" min="1" max="999.99" />

但是请注意，我有以下javascript代码，我在网上发现也运行在同一个字段上，旨在给出一种入门感觉。

$(function() {
    var input = ""; //holds current input as a string

    $("#amount").keydown(function (e) {
        //handle backspace key
        if (e.keyCode == 8 && input.length > 0) {
            input = input.slice(0, input.length - 1); //remove last digit
            $(this).val(formatNumber(input));
        }
        else {
            var key = getKeyValue(e.keyCode);
            if (key) {
                input += key; //add actual digit to the input string
                $(this).val(formatNumber(input)); //format input string and set the input box value to it
            }
        }
        return false;
    });

    function getKeyValue(keyCode) {
        if (keyCode > 57) { //also check for numpad keys
            keyCode -= 48;
        }
        if (keyCode >= 48 && keyCode <= 57) {
            return String.fromCharCode(keyCode);
        }
    }

    function formatNumber(input) {
        if (isNaN(parseFloat(input))) {
            return "0.00"; //if the input is invalid just set the value to 0.00
        }
        var num = parseFloat(input);
        return (num / 100).toFixed(2); //move the decimal up to places return a X.00 format
    }
});

我希望html5可以立即解决问题，但也许它与javascript有某种冲突？我用javascript不太先进。

Answer 1

HTML5输入max和min不限制键盘输入，您可以检查blur事件中的值，如：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN" "http://struts.apache.org/dtds/struts-2.5.dtd">
<struts>
<package name="abc" extends="struts-default">

<action name="login">
<result >login.jsp</result>
</action>

<action name="loginprocess" class="com.javatpoint.Login">
<result name="success"  >loginsuccess.jsp</result>
<result name="error" >loginerror.jsp</result>
</action>

<action name="logout" class="com.javatpoint.Login" method="logout">
<result name="success" >logoutsuccess.jsp</result>
</action>

<action name="profile" class="com.javatpoint.Profile">
<result name="success" >profilesuccess.jsp</result>
<result name="error" >profileerror.jsp</result>
</action>

</package>
</struts>

代码：

<input id="amount" class="formField" type="number" step="0.01" style="width:100%" min="1" max="999.99" onblur="validate(this);" />

演示：http://jsfiddle.net/0do35p5f/

Answer 2

尝试将step属性调整为"0.01"，使用input事件，RegExp.prototype.test()检查input元素的值，String.prototype.slice()以修改已显示值

＆＃13;

$("#amount").on("input", function() {
  if (this.value.length > 3 && !/\./.test(this.value)) {
    this.value = this.value.slice(0, 3).concat(".00")
  }      
  if (/\./.test(this.value)) {
    this.value = this.value
    .replace(/(\.\d{2})(?=\d)/, function(m) {
       return m.slice(0, 2)
    })
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="amount" class="formField" type="number" step="0.01" min="1" max="999.99" 
style="width:100%"  />

＆＃13;

Answer 3

HTML数字输入不会限制键盘输入。因此，您可能希望使用JavaScript来解决此问题。

要将数字大小的检查添加到javascript，您可以按如下方式修改它：

$(function() {
    var input = ""; //holds current input as a string

    $("#amount").keydown(function (e) {
        //handle backspace key
        if (e.keyCode == 8 && input.length > 0) {
            input = input.slice(0, input.length - 1); //remove last digit
            $(this).val(formatNumber(input));
        }
        else {
            var key = getKeyValue(e.keyCode);
            if (key && parseFloat(input + key) <= 99999) {
                input += key; //add actual digit to the input string
                $(this).val(formatNumber(input)); //format input string and set the input box value to it
            }
        }
        return false;
    });

    function getKeyValue(keyCode) {
        if (keyCode > 57) { //also check for numpad keys
            keyCode -= 48;
        }
        if (keyCode >= 48 && keyCode <= 57) {
            return String.fromCharCode(keyCode);
        }
    }

    function formatNumber(input) {
        if (isNaN(parseFloat(input))) {
            return "0.00"; //if the input is invalid just set the value to 0.00
        }
        var num = parseFloat(input);
        return (num / 100).toFixed(2); //move the decimal up to places return a X.00 format
    }
});

按长度或数值限制文本字段条目值

3 个答案: