如何使用javascript/jquery防止將小數點輸入到HTML文本字段中？

我有一個文本字段，用戶將進入一個數字，我想數是整數。要做到這一點，我想忽略用戶輸入小數點的時間。如何使用javascript/jquery防止將小數點輸入到HTML文本字段中？

目前，我有一個檢查場對KEYUP值的JavaScript函數，如果最近鍵入的字符是一個小數點，它被刪除。這會在用戶輸入一個小數點時出現效果，然後消失。有沒有辦法讓小數點根本不出現？

來源

2013-06-04 Cristiano

這將是更加人性化，讓所有的輸入，但顯示時無效的東西鍵入請求一個整數的消息。 – Bergi

我打算顯示一條消息，當用戶輸入一個小數點以及消除它 – Cristiano

不要忘記，用戶總是可以粘貼（Ctrl + V）或拖動人物，而是防止按鍵的，你應該重新檢查整個項目的值並去掉小數點。或者，在'change'事件上做它而不是 – Ian

使用按鍵事件：

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); 
});

來源

2013-06-04 17:57:26

爲什麼setTimeout？ – Cristiano

因爲否則粘貼處理程序中輸入的值將是舊值，而不是更新的值。從的jsfiddle取出超時嘗試，你就會明白（使用CTRL + V例如粘貼值輸入） –

嗯說什麼IM一下，按一個點是不是真的需要時從輸入消除一切，是嗎？ – Bergi

上.keydown()，入住至極按鍵使用功能。如果是「。」，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。

來源

2013-06-04 17:59:40

不適用於小數點以下的數字小鍵盤（至少在筆記本電腦上） –

呃... '190'是'¾'，而不是'.'。 –

if（kCode === 190 || kCode === 110）爲數字鍵盤修復 –

// 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 Demo

來源

2013-06-04 18:06:04 iblamefish

「用戶輸入一個小數點，它出現，然後消失」OP不想要這種行爲 –

@roasted良好的調用 - 我應該更好地閱讀問題。 – iblamefish

當它含有小數點或任何其他符號或字母這將能夠提交數據停止用戶。還有其他一些方法可以阻止用戶通過檢查鍵碼來輸入這些字符，但是我發現通過組合這兩個字符更容易，因爲有時候我想要小數點，有時候我不會。

的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版本

來源

2013-10-02 13:36:40 Crouch

如何使用javascript/jquery防止將小數點輸入到HTML文本字段中？

回答

相關問題