Лучший способ ограничить текстовое поле только цифрами?
Я использую следующий Javascript, чтобы ограничить текстовое поле на моем веб-сайте только принятием цифрового ввода, а также никаких других букв или символов. Проблема заключается в том, что он ДЕЙСТВИТЕЛЬНО отклоняет все другие входы клавиш, например ctrl - A, чтобы выбрать текст или любые другие функции браузера, такие как ctrl - T или ctrl - W, в то время как текст. Кто-нибудь знает о лучшем script, чтобы разрешить только числовой ввод, но не блокировать обычные команды (которые непосредственно не вводятся в поле)? благодаря
Вот код, который я использую сейчас:
function numbersonly(e, decimal)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}
Изменить: ни одно из предложенных решений не разрешило мою задачу разрешения команд типа ctrl - A, когда выбрано текстовое поле. В этом весь смысл моего запроса здесь, поэтому я вернулся к использованию моего оригинального script. О, хорошо.
Ответы
Ответ 1
Это то, что я сделал еще раз для простых чисел, он также позволит всем форматам.
JQuery
$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
Попробуйте
http://jsfiddle.net/zpg8k/
В качестве примечания вы также захотите отфильтровать на стороне отправки/сервера, для вставки/контекстного меню и браузеров, которые не поддерживают событие вставки.
Изменить для разработки нескольких методов
Я вижу, что вы подпрыгиваете вокруг "принятого" ответа, поэтому я что-то проясню. Вы действительно можете использовать любой из перечисленных здесь методов, все они работают. То, что я лично сделал, - это использование my для фильтрации на стороне клиента, а затем на стороне отправки и на стороне сервера используйте RegEx, как это было предложено другими. Однако никакая клиентская сторона сама по себе не будет эффективна на 100%, так как нет ничего, что помешает мне помещать document.getElementById('theInput').value = 'Hey, letters.';
в консоли и в обход любой проверки клиентов (кроме опроса, но я мог бы просто отменить setInterval с консоли). Используйте какое-либо решение на стороне клиента, которое вам нравится, но обязательно выполняйте что-либо на стороне отправки и на стороне сервера.
Редактировать 2 - @Tim Down
Хорошо, в комментариях мне пришлось приспособить две вещи, о которых я не думал. Во-первых, keypress вместо keydown, который был обновлен, но отсутствие indexOf в IE (серьезно Microsoft!?) также нарушает приведенный выше пример. Здесь альтернатива
$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!($.inArray(k,a)>=0))
e.preventDefault();
});
Новый jsfiddle: http://jsfiddle.net/umNuB/
Ответ 2
.keypress(function(e)
{
var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];
if (!($.inArray(e.which, key_codes) >= 0)) {
e.preventDefault();
}
});
Вам также нужны клавиши Backspace и Delete;)
Ответ 3
Это работает в IE, Chrome и Firefox:
<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
Ответ 4
http://jsfiddle.net/PgHFp/
<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
var invalidChars = /[^0-9]/gi
if(invalidChars.test(ob.value)) {
ob.value = ob.value.replace(invalidChars,"");
}
}
</script>
</head>
<body>
<input type="text" onkeyup="checkInput(this)"/>
</body>
</html>
Ответ 5
Просто используйте регулярное выражение, чтобы избавиться от любых несимвольных символов всякий раз, когда нажата клавиша или текстовое поле теряет фокус.
var numInput;
window.onload = function () {
numInput = document.getElementById('numonly');
numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
{
numInput.value = numInput.value.replace(/[^0-9]+/,"");
}
}
Ответ 6
Единственное событие, которое содержит информацию о введенном символе, - keypress. Все, что связано с символами, вы можете заключить из свойства keyCode событий keydown или keyup ненадежны и зависят от конкретного сопоставления клавиатуры. Следующее приведет к тому, что нечисловая клавиатура вводит все основные браузеры, используя символ, полученный из события keypress. Это не помешает пользователю вставить или перетащить нечисловой текст.
var input = document.getElementById("your_input");
input.onkeypress = function(evt) {
evt = evt || window.event;
if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
return false;
}
}
};
Ответ 7
Возможно, вы используете бутстрап. Если это так, этого может быть достаточно:
<input type="text" data-mask="9999999">
Маска ввода
Ответ 8
Я использую это:
oEl.keypress(function(ev)
{
var sKey = String.fromCharCode(ev.which);
if (!sKey.match(/[0-9]/) || !sKey === "")
ev.preventDefault();
});
Преимущество состоит в том, что каждый ключ, который не предоставляет вход в поле, по-прежнему разрешен, поэтому вам не нужно беспокоиться о каждом отдельном ключе. Даже комбо, такие как CTRL + R, все еще работают.
ИЗМЕНИТЬ
Поскольку это не работает в Firefox, мне пришлось немного изменить функцию:
oEl.keypress(function(ev)
{
var iKeyCode = ev.which || ev.keyCode;
var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
var sKey = String.fromCharCode(iKeyCode);
if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
ev.preventDefault();
}
});
Объяснение
Все браузеры обрабатывают событие jquerys по-разному. Чтобы заставить его работать в FF, добавляется проверка $.inArray. Поскольку event-событие firefoxs не запускается, когда используются комбинации, такие как strg + tab, но другие делают, подход key.match все еще добавляет небольшое значение последнему, поскольку он позволяет использовать эти комбинации.
Ответ 9
Следующий код - это то, что я широко использую. Я нашел script на форуме, но изменил и расширил его, чтобы удовлетворить мои потребности:
<script type="text/javascript">
// Restrict user input in a text field
// create as many regular expressions here as you need:
var digitsOnly = /[1234567890]/g;
var integerOnly = /[0-9\.]/g;
var alphaOnly = /[A-Za-z]/g;
var usernameOnly = /[0-9A-Za-z\._-]/g;
function restrictInput(myfield, e, restrictionType, checkdot){
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
// if user pressed esc... remove focus from field...
if (code==27) { this.blur(); return false; }
// ignore if the user presses other keys
// strange because code: 39 is the down key AND ' key...
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
if (character.match(restrictionType)) {
if(checkdot == "checkdot"){
return !isNaN(myfield.value.toString() + character);
} else {
return true;
}
} else {
return false;
}
}
}
</script>
Различные методы использования:
<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">
Ответ 10
Добавьте <script type="text/javascript" src="jquery.numeric.js"></script>, затем используйте
$("element").numeric({ decimal: false, negative: false });
Ответ 11
более короткий путь и легко понять:
$('#someID').keypress(function(e) {
var k = e.which;
if (k <= 48 || k >= 58) {e.preventDefault()};
});
Ответ 12
Это вариант ответа Роберта, который позволяет ввести одну десятичную точку. Если десятичная точка уже введена, в качестве входных данных принимаются только цифры.
JSFiddle - ввод десятичного числа
// Allow only decimal number input
$('#decimalInput').keypress(function (e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
// allow a max of 1 decimal point to be entered
if (this.value.indexOf(".") === -1) {
a.push(46);
}
if (!(a.indexOf(k) >= 0)) e.preventDefault();
$('span').text('KeyCode: ' + k);
});
Ответ 13
Я знаю, что есть уже много ответов, но ради простоты я хотел бы добавить еще один ответ, который простой и понятный > , в котором нам не нужно запоминать коды клавиш, а также работает через все браузеры.
document.getElementById('myinput').onkeydown = function(e)
{
console.log(e.key);
//console.log(e.target.value);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
return true;
break;
case ".":
if (e.target.value.indexOf(".") == -1)
{
return true;
}
else
{
return false;
}
break;
default:
return false;
}
}
<input type="text" placeholder="Enter Value" id="myinput" />
Ответ 14
Стоит отметить, что независимо от того, насколько жестко вам удается управлять этим через интерфейс (Javascript, HTML и т.д.), вам все равно нужно проверить его на сервере, потому что нет ничего, что могло бы помешать пользователю отключить javascript, или даже преднамеренно отправляя мусор в вашу форму, чтобы попытаться взломать вас.
Мой совет: используйте разметку HTML5, чтобы браузеры, которые ее поддерживали, будут использовать ее. Также используйте ранее предложенную опцию JQuery (у inital-решения могут быть недостатки, но похоже, что эти комментарии работают). Затем выполните проверку на стороне сервера.
Ответ 15
это также включит входы numpad.
.keydown(function(event){
if(event.keyCode == 8 || event.keyCode == 46)
return true;
if(event.keyCode >= 96 && event.keyCode <= 105)
return true;
if(isNaN(parseInt(String.fromCharCode(event.keyCode),10)))
return false;
});
Ответ 16
Чтобы блокировать что-либо, кроме цифр, от ввода в текстовое поле, но все же позволяя другим кнопкам работать (например, удаление, сдвиг, вкладка и т.д.), смотрите ссылка на кодовые коды Javascript; что-либо от 65 до (222) может быть заблокировано.
Используя Jquery и Javascript, это будет выглядеть так:
$('#textFieldId').keydown(function(event) {
if ( event.keyCode > 64 ) {
event.preventDefault();
}
});
Коды клавиш в Javascript будут одинаковыми, независимо от того, используется ли JQuery.
Ответ 17
Вот мое решение: комбинация работающих ниже.
var checkInput = function(e) {
if (!e) {
e = window.event;
}
var code = e.keyCode || e.which;
if (!e.ctrlKey) {
//46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
return true;
//35..39 - home, end, left, right
if (code >= 35 && code <= 39)
return true;
//numpad numbers
if (code >= 96 && code <= 105)
return true;
//keyboard numbers
if (isNaN(parseInt(String.fromCharCode(code), 10))) {
e.preventDefault();
return false;
}
}
return true;
};
Ответ 18
Я столкнулся с вашим вопросом, пытаясь понять это сам. Вот решение, которое я придумал.
// Prevent user from entering non-numeric characters in number boxes.
(function (inputs) {
var input;
var f = function (e) {
var unicodeRe = /U\+(\d+)/;
// Chrome doesn't support the standard key property, so use keyIdentifier instead.
// Instead of the actual character that "key" returns, keyIdentifier returns
// A string such as "U+004F" representing the unicode character.
// For special characters (e.g., "Shift", a string containing the name of the key is returned.)
var ch = e.key || e.keyIdentifier;
var match = ch.match(unicodeRe);
// keyIdentifier returns a unicode. Convert to string.
if (match) {
ch = String.fromCharCode(Number.parseInt(match[1], 16));
}
console.log(ch);
if (ch.length === 1 && /[^0-9]/.test(ch)) {
if (!/[\b]/.test(ch)) { // Don't prevent backspace.
e.preventDefault();
}
}
};
for (var i = 0, l = inputs.length; i < l; i += 1) {
input = inputs[i];
input.onkeydown = f;
}
}(document.querySelectorAll("input[type=number],#routeFilterBox")));
Изменить: я обнаружил, что мое решение не позволяет пользователю вводить цифры через numpad в Chrome. Клавиши клавиатуры 0-9, похоже, возвращают символ "`" для 0 и A-I для остальных цифровых клавиш.
Ответ 19
Все ответы устарели, длинны, и вызовет раздражение у ваших пользователей. Большинство из них даже не фильтруют и не разрешают вставлять контент.
Вместо фильтрации входных данных выполните некоторую проверку перед отправкой формы, а затем и на стороне сервера.
В HTML включена проверка:
<input type="number" pattern="[0-9]+">
Это также включает цифровую клавиатуру на мобильном телефоне.
Ответ 20
Это мой плагин для этого случая:
(function( $ ) {
$.fn.numbers = function(options) {
$(this).keypress(function(evt){
var setting = $.extend( {
'digits' : 8
}, options);
if($(this).val().length > (setting.digits - 1) && evt.which != 8){
evt.preventDefault();
}
else{
if(evt.which < 48 || evt.which > 57){
if(evt.keyCode != 8){
evt.preventDefault();
}
}
}
});
};
})( jQuery );
Использование:
$('#limin').numbers({digits:3});
$('#limax').numbers();
Ответ 21
Есть мое текущее решение числового ввода, необходимо протестировать в разных браузерах, но, похоже, работает
Поддержка запятой и разделителем периодов (czech native - запятая), ввода пробелов и цифр/клавиатуры. Разрешить Ctrl + C Ctrl + A или Ctrl + X, стрелка навигация и удаление Ctrl + V. Реагируйте на клавишу эвакуации путем размытия ввода.
Смотрите мой кофе script:
(($) ->
$.fn.onlyNumbers = ->
@each ->
$(@).keydown (e) ->
# get code of key
code = if e.keyCode then e.keyCode else e.which
return $(@).blur() if code is 27 # blur on escape
return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x]
return if code in [96..105] # numpad numbers
return if code in [48..57] # numbers on keyboard
return if code in [35..39] # 35..39 - home, end, left, right
return if code in [188, 190, 32] # comma, period, space
return if code in [44] # comma, period,
e.returnValue = false # IE hate you
e.preventDefault();
$(@).keypress (e) ->
code = if e.keyCode then e.keyCode else e.which
return if code in [44, 46, 32] # comma, period, space
return if code in [48..57] # numbers on keyboard
e.returnValue = false # IE hate you
e.preventDefault();
) jQuery
Вы можете получить скомпилированный Javascript здесь http://goo.gl/SbyhXN
Ответ 22
Мои функции:
$('.input_integer_only').on('input', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
$('.input_float_only').on('input', function(e) {
var $var = $(this).val().replace(/[^0-9\.]/g, '');
var $aVar = $var.split('.');
if($aVar.length > 2) {
$var = $aVar[0] + '.' + $aVar[1];
}
$(this).val($var);
});
Ответ 23
Вы можете внести изменения, чтобы принять код ключа для клавиш Ctrl: 17, 18, 19, 20.
Тогда ваш код будет выглядеть следующим образом:
function numbersonly(e, decimal) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) || (key==17) || (key==18) || (key==19) || (key==20))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}
Ответ 24
document.getElementById('myinput').onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8
|| e.keyCode == 9)) {
return false;
}
}
Ответ 25
Вы можете сделать это так, чтобы принимать только цифры в текстовом поле,
function onChange(event){
var ckeckChars = /[^0-9]/gi;
if(checkChars.test(event.target.value)) {
event.target.value = event.target.value.replace(ckeckChars,"");
}
Ответ 26
Эта функция JavaScript будет использоваться для ограничения алфавитов и специальных символов в текстовом поле, будут разрешены только цифры, удаление, клавиши со стрелками и обратная клавиша. Фрагмент кода JavaScript - Разрешить числа в TextBox, Ограничить алфавиты и специальные символы
Проверено в IE & Chrome.
Функция JavaScript
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
</script>
Исходный код HTML с JavaScript
<html>
<head>
<title>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</title>
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
</script>
</head>
<body style="text-align: center;">
<h1>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</h1>
<big>Enter numbers only: </big>
<input type="text" onkeypress='return restrictAlphabets(event)'/>
</body>
</html>
Refrence
Ответ 27
Вы можете обрабатывать событие te на html, введя функцию keypresshandler
function keypresshandler(event)
{
var charCode = event.keyCode;
//You condition
if (charCode == 58 ){
event.preventDefault();
return false;
}
}
Ответ 28
Javascript часто используется на стороне клиента браузера для выполнения простых задач, которые в противном случае потребовали бы полной обратной передачи на сервер. Многие из этих простых задач включают обработку текста или символов, введенных в элемент формы на веб-странице, и часто необходимо знать код javascript, связанный с символом. Вот ссылка.
Нажмите клавишу в текстовом поле ниже, чтобы увидеть соответствующий Javascript key code.
function restrictCharacters(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (((charCode >= '48') && (charCode <= '57')) || (charCode == '44')) {
return true;
}
else {
return false;
}
}
Enter Text:
<input type="text" id="number" onkeypress="return restrictCharacters(event);" />
