如何使用javascript / jquery防止在HTML文本字段中键入小数点？

Question

我有一个文本字段，用户将在其中输入数字，我希望数字为整数。 为此，当用户键入小数点时，我想忽略。

当前，我有一个javascript函数，用于检查keyup上字段的值，如果键入的最新字符是小数点，则会将其删除。 这会产生一种效果，用户可以输入一个小数点，然后出现然后消失。 有没有办法使小数点根本不显示？

Answer 1

使用按键事件：

http://jsfiddle.net/wAJp7/1

$('input').on('keyup', function (e) {
    if (e.which === 46) return false;
}).on('input', function () {
    var self = this;
    setTimeout(function () {
        if (self.value.indexOf('.') != -1) self.value = parseInt(self.value, 10);
    }, 0);
});

Answer 2

在.keydown()上使用一个功能，该功能用于检查是否已按下wich键。 如果是“。”，则请preventDefault() 。

$('input').keydown(function(e){
    var kCode = (e.which || e.keyCode)
    if(kCode == 190 || kCode == 110) return false;
    if(e.which === 86 && (e.ctrlKey || e.metaKey)) return false;
})

小提琴： http : //jsfiddle.net/PsqhJ/1/

编辑：添加了阻止用户到ctr + v。

Answer 3

// don't do anything unless a number key is pressed
$("input").on("keypress", function(event) {
  if (event.which < 48 || event.which > 57) {
    event.preventDefault();
  }
});

这可能不是最用户友好的解决方案-以某种方式将字段标记为无效并要求他们更正会更友好-但这将确保您获得整数。

JS Bin示范

Answer 4

当它包含小数点或任何其他符号或字母时，这将阻止用户提交数据。 您还可以通过其他方法来停止用户，甚至通过检查键码来键入这些字符，但是我发现将两者结合起来会更容易，因为有时我想要小数点，有时我不想要。

Javascript：

function NoDecimal(o)
{
    if (o.value.length > 0) 
    {
        var objReg = /^\d{0,10}?$/;
        if (objReg.test(o.value))
        {
            o.style.borderColor='';
            o.style.fontWeight='normal';
            document.getElementById('submit').disabled = false;
        }
        else
        {    
            o.style.borderColor='red';
            o.style.fontWeight='bold';
            document.getElementById('submit').disabled=true;
        }    
        return false;
    }
}

HTML：

Number: <input type="text" onkeyup="NoDecimal(this);">

您还可以使用onkeyup，onkeydown，onkeypress和oninput，但是较旧的浏览器不会将oninput作为html5的一部分进行处理。 特别是较早的Internet Explorer版本