Как разрешить числовое (0-9) и десятичное значение текстовое поле с помощью jQuery?
Я написал несколько строк, чтобы принимать только числовые символы, но мой script не работает. когда я набираю любой алфавит, он вводится в текстовое поле, которое я не хочу. Я хочу, чтобы текстовое поле принимало только числовое значение и ".". точка для десятичного числа. вот мой script. просто скажите мне, что там не так.
$().ready(function () {
$("input[id*='txtQty']").keyup(function (event) {
var flag = false;
if (event.shiftKey == true) {
event.preventDefault();
}
// Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
// Allow normal operation
flag = true;
} else {
// Prevent the rest
event.preventDefault();
}
if (flag) {
}
});
});
если возможно, дайте мне script, который позволит моему текстовому поле только числовому и десятичному числу. спасибо
вот мой полный script. проблема в том, что он принимает точку "." , которую я не хочу.
$().ready(function () {
$("input[id*='txtQty']").keydown(function (event) {
var flag = true;
if (event.shiftKey == true) {
event.preventDefault();
flag = false;
}
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {
} else {
event.preventDefault();
flag = false;
}
if (flag) {
if (jQuery.trim(this.value) != "") {
if (IsNumeric(jQuery.trim(this.value)) == true) {
var Symbol = $("span[id*='lblPrice']").text().trim().substring(1, 0);
var oldprice = $("input[id*='txtHiddenPrice']").val();
var newprice = Math.round((oldprice * this.value), 2);
$("span[id*='lblPrice']").text(Symbol + newprice);
UpdateCart($(this).closest('tr').find("input[id*='txtItemId']").val(), $(this).closest('tr').find("input[id*='txtProductId']").val(), this.value);
}
}
}
});
});
так скажите мне, что мне нужно изменить в моем коде, в результате он не должен принимать десятичное значение.
еще одна важная вещь, я присоединяю событие keydown() с системой wild card, потому что у моей страницы может быть много текстовых полей с именем end, например txtQty.
$("input[id*='txtQty']").keyup(function (event) {
пожалуйста, помогите мне. спасибо
Ответы
Ответ 1
Вы не можете использовать e.preventDefault() его в событии keyup. Измените его на keydown.
$(function () {
$("input[id*='txtQty']").keydown(function (event) {
if (event.shiftKey == true) {
event.preventDefault();
}
if ((event.keyCode >= 48 && event.keyCode <= 57) ||
(event.keyCode >= 96 && event.keyCode <= 105) ||
event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {
} else {
event.preventDefault();
}
if($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
event.preventDefault();
//if a decimal has been added, disable the "."-button
});
});
Ответ 2
Вы можете удалить не numeric char при нажатии клавиши.
$("#txtQty").keyup(function() {
var $this = $(this);
$this.val($this.val().replace(/[^\d.]/g, ''));
});
Демонстрация
Ответ 3
Создайте класс только для чисел и добавьте его в свой элемент
Это примет:
- Backspace
- удалять
- номера
- один десятичный
$(".numbers-only").keypress(function (e) {
if(e.which == 46){
if($(this).val().indexOf('.') != -1) {
return false;
}
}
if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
return false;
}
});
Ответ 4
Это решение применяется только в том случае, если вы не указали десятичное число или только число от 0 до 9
$("#number").keypress(function( event ){
var key = event.which;
if( ! ( key >= 48 && key <= 57 ) )
event.preventDefault();
});
вы можете просмотреть текущий образец здесь http://jsfiddle.net/yghD3/6/
Ответ 5
Мое решение принимает Copy & Paste и сохраняет положение каретки. Он используется для стоимости продуктов, поэтому допускает только положительные десятичные значения. Может быть, рефакторинг очень легко разрешить отрицательные или целые цифры.
$(function () {
$("input.only-positive-decimal").bind("change keyup input", function () {
var position = this.selectionStart - 1;
//remove all but number and .
var fixed = this.value.replace(/[^0-9\.]/g, '');
if (fixed.charAt(0) === '.') //can't start with .
fixed = fixed.slice(1);
var pos = fixed.indexOf(".") + 1;
if (pos >= 0) //avoid more than one .
fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', '');
if (this.value !== fixed) {
this.value = fixed;
this.selectionStart = position;
this.selectionEnd = position;
}
});
});
Поместите на страницу html:
<input type="text" class="only-positive-decimal" />
Ответ 6
Предотвращение нечисловых чисел
$(".number").on('keypress', function (e) {
return e.metaKey || e.which <= 0 || e.which == 8 || e.which == 46 || /[0-9]/.test(String.fromCharCode(e.which));
// cmd/ctrl || arrow keys || delete key || dot key || numbers
});
Ответ 7
Вы можете попробовать http://www.texotela.co.uk/code/jquery/numeric/
В этой теме упоминается один и тот же плагин вместе с кучей других вещей, которые вы могли бы попробовать.
Ответ 8
$('.number').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
Ответ 9
//This will let you enter numbers only and the decimal point ones.
$(window).load(function(){
$('.number').keypress(function(event) {
if(event.which < 46 || event.which >= 58 || event.which == 47) {
event.preventDefault();
}
if(event.which == 46 && $(this).val().indexOf('.') != -1) {
this.value = '' ;
}
});
});
Ответ 10
Это позволит от 1 до 9 чисел и десятичных чисел. Если вставляются другие символы, они заменяют эти цифры.
<script>
$("input[id*='txtQty']").keydown(function () {
var txtQty = $(this).val().replace(/[^0-9\.]/g,'');
$(this).val(txtQty);
});
</script>
Зайдите в fiddle.
Ответ 11
Попробуйте этот код
$('#from-amount1').keypress(function(event) {
//alert(event.which == 8);
//alert(event.which);
if((event.which > 47 && event.which < 58) || (event.which == 46 || event.which == 8))
{
// your condition
}
else
{
event.preventDefault();
}
}).on('paste', function(event) {
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="text" value="" id="from-amount1"/>
Ответ 12
element.keypress(function (e) {
var charCode = (e.which) ? e.which : event.keyCode;
var dec=0;
dec = (this.value.match(/[.]/g) || [] ).length;
if(dec===1 && e.key=='.')
return false;
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode!=46)
return false;
});
Ответ 13
1 Позволяет первую точку символа
2 Запретить более одной точки
3 Позволяет обеим точечным клавишам
в вашем HTML
<input class="number" type="number" log="" id="yourId" log="" />
$('#yourId').keypress(KeyPressOnlyDecimals);
function KeyPressOnlyDecimals (event) {
if (event.which != 13)
{
let cId = $(window.getSelection().anchorNode).find('input')[0].id;
let tId = $(event.currentTarget).attr('id');
let sel = window.getSelection().toString();
if (((event.which != 46 ) || ($(this).val().indexOf('.') != -1 && ($(event.currentTarget).val().length > 0 && ((cId != tId) || (cId === tId && (sel == null || sel.length == 0)))))) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
$(event.currentTarget).on('paste', function(event) {
event.preventDefault();
});
var currentVal = $(event.currentTarget).val();
let log = $(event.currentTarget).attr('log');
var count = log.split('.').length;
if (count == 2 && event.which == 46 && sel != currentVal)
{
event.preventDefault();
}
if (count >= 2)
{
if (cId === tId && sel.length > 0)
{
var replaced = currentVal.replace(new RegExp(sel, 'g'), event.key);
}
if (count > 2 && $(event.currentTarget).val().length > 0 && ((cId != tId) || (cId === tId && (sel == null || sel.length == 0) )))
{
event.preventDefault();
}
}
else
{
if(event.which == 46)
$(event.currentTarget).attr('log',event.key);
}
console.log($(event.currentTarget).attr('log'));
}
}
