Question

Я пытаюсь, чтобы текстовое поле допускало только числа. (Т. Е «0-9», а не десятичные) я наткнулся на this popular answer, который сказал, чтобы сделать:

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>

Я пробовал, но проблема в том, что позволяет вставить любой символ Как я могу запретить вставлять «незаконные» символы? Кроме того, будет ли этот код работать с различными клавиатурами, такими как немецкие клавиатуры?

Пожалуйста, не публикуйте сообщения о type="number". Я не использую это по многим причинам.

Answer 1

Вы можете указать intercept the paste event и обработать свой случай там.

Answer 2

Перехватите событие oninput и рассмотрите вложенный текст. Примечание. Это событие также запускается при вводе ключа.

<script> 
function validate(element) { 
    if (element.value.match('\\D')) { 
    alert('Please enter only numeric values\n(You entered ' + element.value + ')'); 
    element.value = ''; 
    } 
} 
</script> 

<input type="text" oninput="validate(this);"> 

Answer 3

HTML код:

<form name="myForm" action="" onsubmit="return checkInp()" method="post"> 
    First name: <input type="text" name="age"> 
<input type="submit" value="Submit"> 

Javascript Код:

function checkInp() 
    { 
    var x=document.forms["myForm"]["age"].value; 
     if (isNaN(x)) 
      { 
      alert("Must input numbers"); 
      return false; 
      } 
    } 

Answer 4

Вы можете просто использовать событие нажатия клавиши, которые будут проверять на вход каждый раз, когда новый символ вводится.

var txt = document.getElementById("phone"); 
 
txt.onkeypress = function(key) { 
 
    if (key.charCode < 48 || key.charCode > 57) return false; 
 
} 
 
txt.addEventListener("paste", 
 
    function(e) { 
 
    e.preventDefault(); 
 
    var pastedData = e.clipboardData.getData('Text'); 
 
    if (!isNaN(pastedData)) { 
 
     txt.value += pastedData; 
 
    } 
 
    }, true);

<fieldset> 
 
    <label for="phone">Phone:</label> 
 
    <input type="text" id="phone" /> 
 
</fieldset>

Answer 5

Для удобного интерфейса, как правило, лучше, чтобы проверить на основе фактического значения входных данных, поэтому не используйте charCode, используйте значение на вход в. Для этого простое регулярное выражение подходит:

if (/\D/.test(value)) { 
    // a non–digit was entered 
} 

Это часто лучше, чтобы проверить, когда пользователь заканчивает вход, например, для банковского дела я могу скопировать и вставить остаток моей кредитной карты как «1,203.43», а затем удалить запятую. Затем поле проверяется, когда я оставляю его (onblur или onsubmit) с подходящим экранным сообщением, оставляя меня исправить, если это неправильно.

Но в некоторых случаях это также подходит для использования keyup или другого подходящего события.

Таким образом, в случае ввода, который должен иметь только цифры, вы могли бы сделать что-то вроде следующего:

function validate(el) { 
 
    if (el.classList.contains('numsOnly')) { 
 
    document.getElementById(el.id + 'Err').innerHTML = /\D/.test(el.value)? "Must contain only digits" : ''; 
 
    } 
 
}

.screenHint {font: sans-serif; font-size: 80%; color: #999999}

<label for="aNum">A number:<input name="aNum" id="aNum" class="numsOnly" 
 
     onblur="validate(this)" onkeyup="validate(this)" onpaste="validate(this)" 
 
     placeholder="1234"></label><span class="screenHint">Digits only</span><br> 
 
<span style="color:red; background-color: white;" id="aNumErr"></span>

Конечно, вы, вероятно, добавить слушателей динамически и иметь гораздо более обширный набор валидаций, но приведенное выше показывает некоторые из принципов.