Question

我已尝试以下操作来限制用户仅按

输入数字

<input type="text"  onkeypress="return event.charCode &gt; 48 &amp;&amp; event.charCode &lt; 57"/>

但是如何只允许小数点后的一位数，如0.5,1.0,2,2.5等，而不是0.56,1.22等。

Answer 1

尝试使用模式（HTML5）： ...type="number" name="..." pattern="([0-9]{1,2}).([0-9]{1})" title="... 。模式指定正则表达式以检查输入值。

Answer 2

如果你可以使用jquery（因为我没有在你的问题中看到jquery标记），那么你可以这样做

$(function () {
 
    $('#number').bind('paste', function () {
        var self = this;
        setTimeout(function () {
            if (!/^\d*(\.\d{1,2})+$/.test($(self).val())) $(self).val('');
        }, 0);
    });
    
    $('.decimal').keypress(function (e) {
        var character = String.fromCharCode(e.keyCode)
        var newValue = this.value + character;
        if (isNaN(newValue) || hasDecimalPlace(newValue, 2)) {
            e.preventDefault();
            return false;
        }
    });
    
    function hasDecimalPlace(value, x) {
        var pointIndex = value.indexOf('.');
        return  pointIndex >= 0 && pointIndex < value.length - x;
    }
});

.decimal {
  padding: 5px 10px;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="number" class="decimal" />

Answer 3

您可以使用step属性指定元素的合法数字间隔。

<input type="number" step="0.1">

如果将步长设置为0.1，则只有小数点后1位的十进制数才有效。

如何限制用户在html文本字段中只输入小数点后的一位数

3 个答案: