允许html输入框只输入一个完整的数字和正好十进制.5

时间:2016-11-11 08:23:06

标签: javascript html onkeypress

我正在制作网络应用程序,要求用户输入一位小数的数字。我限制用户输入使用此javascript代码编号的其他字符

HTML

<input type="number" name='days' class="w3-input w3-padding-tiny" id="cntday"  onkeypress="return isNumberKey(event)" placeholder="Enter days"/>

的javascript

function isNumberKey(evt) {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 &&
             (charCode < 48 || charCode > 57))
             return false;
          return true;
         }  

但此功能仅阻止用户输入数字以外的字符。 我需要阻止用户输入多个小数位以及输入的小数应为.5

它就像这样

  • 如果用户输入5.55,则应替换为5.5或者阻止用户输入额外的小数

  • 如果用户输入5.2或任何小数,则应替换为5.5,换句话说,用户只能输入带小数的数字.5

如何使用我当前的onkeypress函数实现这一目标?

这不是另一个问题的重复。停止标记此

2 个答案:

答案 0 :(得分:1)

您可以通过将数字分成两部分来实现:

第1部分表示自然数。

第2部分为十进制数。

然后您可以将任何输入的十进制数替换为.5

这样的事情:

$('input').keyup(function() {
var value = this.value;
var pos = value.indexOf(".");
var result;
if (pos !== -1) {
    var part1 = value.substr(0, pos);
    var part2 = value.substr(pos);
    result = part1 + part2.replace(part2,".5")
    $('input').val(result);
}
});

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 46 && charCode > 31 &&
        (charCode < 48 || charCode > 57))
        return false;
        return true;
}  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name='days' class="w3-input w3-padding-tiny" id="cntday"  onkeypress="return isNumberKey(event)" placeholder="Enter days"/>

答案 1 :(得分:1)

使用此

$('#cntday').keyup(function() {
    if(this.value %1 != 0.5){
        this.value = this.value - this.value%1 + 0.5;
    }
});

条件检查是否输入了小数,只要输入小数并输入数字,它就会将其更改为.5 它满足您提到的两个要求。 在这里查看https://jsfiddle.net/xn0koawx/