如何使用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版本