jquery 只允許輸入浮點數
[英]jquery only allow input float number
問題描述
我正在制作一些只允許浮點數的輸入掩碼。 但目前的問題是我無法檢查是否輸入了多個點。 你能檢查那些點並為我防止它嗎？
直播代碼： http://jsfiddle.net/thisizmonster/VRa6n/
$('.number').keypress(function(event) {
if (event.which != 46 && (event.which < 47 || event.which > 59))
{
event.preventDefault();
if ((event.which == 46) && ($(this).indexOf('.') != -1)) {
event.preventDefault();
}
}
});
14 個解決方案
解決方案1
41 已采納 2011-06-21 07:25:50
您可以在同一個語句中檢查期間。
此外，您需要使用val方法來獲取元素的值。
此外，您要檢查區間 48 到 57，而不是 47 到 59，否則您還將允許/ 、 :和; .
jQuery(document).ready(function() { $('.float-number').keypress(function(event) { if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) { event.preventDefault(); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> Enter Number: <input type="text" name="number" value="" class="float-number"> </body> </html>
解決方案2
23 2012-11-08 03:21:39
我認為你們錯過了左右箭頭、刪除和退格鍵。
$('.number').keypress(function(event) {
if(event.which == 8 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46)
return true;
else if((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
event.preventDefault();
});
解決方案3
6 2013-03-21 09:50:55
我想每個人都忘記了用鼠標粘貼文本的情況，在這種情況下你無法檢測到擊鍵，因為沒有。 這是我一直在研究的另一種方法。
// only integer or float numbers (with precision limit)
// example element: <input type="text" value="" class="number" name="number" id="number" placeholder="enter number" />
$('.number').on('keydown keypress keyup paste input', function () {
// allows 123. or .123 which are fine for entering on a MySQL decimal() or float() field
// if more than one dot is detected then erase (or slice) the string till we detect just one dot
// this is likely the case of a paste with the right click mouse button and then a paste (probably others too), the other situations are handled with keydown, keypress, keyup, etc
while ( ($(this).val().split(".").length - 1) > 1 ) {
$(this).val($(this).val().slice(0, -1));
if ( ($(this).val().split(".").length - 1) > 1 ) {
continue;
} else {
return false;
}
}
// replace any character that's not a digit or a dot
$(this).val($(this).val().replace(/[^0-9.]/g, ''));
// now cut the string with the allowed number for the integer and float parts
// integer part controlled with the int_num_allow variable
// float (or decimal) part controlled with the float_num_allow variable
var int_num_allow = 3;
var float_num_allow = 1;
var iof = $(this).val().indexOf(".");
if ( iof != -1 ) {
// this case is a mouse paste (probably also other events) with more numbers before the dot than is allowed
// the number can't be "sanitized" because we can't "cut" the integer part, so we just empty the element and optionally change the placeholder attribute to something meaningful
if ( $(this).val().substring(0, iof).length > int_num_allow ) {
$(this).val('');
// you can remove the placeholder modification if you like
$(this).attr('placeholder', 'invalid number');
}
// cut the decimal part
$(this).val($(this).val().substring(0, iof + float_num_allow + 1));
} else {
$(this).val($(this).val().substring(0, int_num_allow));
}
return true;
});
解決方案4
6 2015-05-11 16:04:21
適用於整數和浮點值。 另外，復制/粘貼剪貼板事件。
var el = $('input[name="numeric"]'); el.prop("autocomplete",false); // remove autocomplete (optional) el.on('keydown',function(e){ var allowedKeyCodesArr = [9,96,97,98,99,100,101,102,103,104,105,48,49,50,51,52,53,54,55,56,57,8,37,39,109,189,46,110,190]; // allowed keys if($.inArray(e.keyCode,allowedKeyCodesArr) === -1 && (e.keyCode != 17 && e.keyCode != 86)){ // if event key is not in array and its not Ctrl+V (paste) return false; e.preventDefault(); } else if($.trim($(this).val()).indexOf('.') > -1 && $.inArray(e.keyCode,[110,190]) != -1){ // if float decimal exists and key is not backspace return fasle; e.preventDefault(); } else { return true; }; }).on('paste',function(e){ // on paste var pastedTxt = e.originalEvent.clipboardData.getData('Text').replace(/[^0-9.]/g, ''); // get event text and filter out letter characters if($.isNumeric(pastedTxt)){ // if filtered value is numeric e.originalEvent.target.value = pastedTxt; e.preventDefault(); } else { // else e.originalEvent.target.value = ""; // replace input with blank (optional) e.preventDefault(); // retur false }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" name="numeric" value="" placeholder="insert value">
[2017-10-31] Vanilla.js
let el = document.querySelector('input[name="numeric"]'); el.addEventListener('keypress',(event) => { let k = event.key, t = isNaN(k), sc = ['Backspace'].indexOf(k) === -1, d = k === '.',dV = el.value.indexOf('.') > -1, m = k === '-',mV = el.value.length > 0; if((t && sc) && ((d && dV) || (m && dV) || (m && mV) || ((t && !d) && (t && !m)))){event.preventDefault();} },false); el.addEventListener('paste',(event) => { if(event.clipboardData.types.indexOf('text/html') > -1){ if(isNaN(event.clipboardData.getData('text'))){event.preventDefault();} } },false);
<input type="text" name="numeric">
解決方案5
3 2011-06-21 07:25:16
您的代碼似乎很好，但過於復雜。
首先，它是$(this).val().indexOf ，因為你想對這個值做一些事情。
其次， event.which == 46檢查位於if子句中，該子句僅在event.which != 46時通過，這永遠不會為真。
我最終得到了這個有效的方法：http: //jsfiddle.net/VRa6n/3/ 。
$('.number').keypress(function(event) {
if(event.which < 46
|| event.which > 59) {
event.preventDefault();
} // prevent if not number/dot
if(event.which == 46
&& $(this).val().indexOf('.') != -1) {
event.preventDefault();
} // prevent if already dot
});
解決方案6
2 2014-04-02 10:37:57
HTML
<input type="text" onkeypress="return isFloatNumber(this,event)" />
Javascript
function isFloatNumber(item,evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode==46)
{
var regex = new RegExp(/\./g)
var count = $(item).val().match(regex).length;
if (count > 1)
{
return false;
}
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
解決方案7
2 2015-10-18 02:18:45
我找到了這種方法，
$.validator.addMethod("currency", function (value, element) {
return this.optional(element) || /^\$(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$/.test(value);
}, "Please specify a valid amount");
解決方案8
1 2014-03-31 17:55:11
另一個插件，基於 Carlos Castillo 的回答
https://github.com/nikita-vanyasin/jquery.numberfield.js
向 jQuery 對象添加方法：
$('input.my_number_field').numberField(options);
其中 options 是（您可以傳遞任何選項或不傳遞選項）：
{
ints: 2, // digits count to the left from separator
floats: 6, // digits count to the right from separator
separator: "."
}
解決方案9
1 2017-02-20 17:14:33
使用 jQuery 並允許負浮點數：
// Force floats in '.js_floats_only' inputs
$(document).ready(function() {
$('.js_floats_only').each(function() {
// Store starting value in data-value attribute.
$(this).data('value', this.value);
});
});
$(document).on('keyup', '.js_floats_only', function() {
var val = this.value;
if ( val == '-' ) {
// Allow starting with '-' symbol.
return;
} else {
if ( isNaN(val) ) {
// If value is not a number put back previous valid value.
this.value = $(this).data('value');
} else {
// Value is valid, store it inside data-value attribute.
$(this).data('value', val);
}
}
});
解決方案10
1 2012-02-24 13:24:43
使用 jQuery。
$(document).ready(function()
{
//Only number and one dot
function onlyDecimal(element, decimals)
{
$(element).keypress(function(event)
{
num = $(this).val() ;
num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
{
event.preventDefault();
}
if($(this).val() == parseFloat(num).toFixed(decimals))
{
event.preventDefault();
}
});
}
onlyDecimal("#TextBox1", 3) ;
});
解決方案11
0 2012-12-10 09:09:53
$('.number').keypress(function(event){
if($.browser.mozilla == true){
if (event.which == 8 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 9 || event.keyCode == 16 || event.keyCode == 46){
return true;
}
}
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
這適用於所有瀏覽器。
解決方案12
0 2016-05-11 12:32:36
<input type="text" data-textboxtype="numeric" />
<script>
$(document).on('keydown', '[data-textboxtype="numeric"]', function (e) {
// Allow: backspace, delete, tab, escape, enter and . and -
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190, 109, 189]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return true;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
return false;
}
return true;
});
</script>
解決方案13
0 2020-03-03 19:57:32
下面的代碼我只允許數字和點符號。
ASCII 字符數以 47 開頭，以 58 結尾，點值為 190。
$("#Experince").keyup(function (event) {
debugger
if ((event.which > 47
&& event.which < 58) ||event.which== 190) {
if ($("#Experince").val().length > 3) {
}
} // prevent if not number/dot
else {
$("#Experince").val($("#Experince").val().slice(0, -1))
}
});
解決方案14
0 2021-09-27 16:01:10
對於簡單的情況，無需硬編碼，一些 html 指令就足夠了
<input type="number" step="0.01"/>
解決方案15
-1 2022-07-18 14:16:05
oninput="this.value = this.value.replace(/[^0-9.]/g,'').replace(/(..*)./g, $1);"
如何使用jQuery在輸入數字字段中僅允許非小數正整數？
[英]How to only allow non-decimal positive integer number in input number field with jquery?
Jquery：如何使用 jQuery 在輸入文本字段中只允許數字/浮點數（即使復制粘貼）？
[英]Jquery: How to allow only numbers/float with comma (even when copy-pasted) in input text field using jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.