Чи є швидкий спосіб встановити введення тексту HTML ( <input type=text />), щоб дозволити лише числові натискання клавіш (плюс '.')?

^{Примітка. Це оновлена ​​відповідь. У коментарях нижче йдеться про стару версію, яка переплуталася з клавішними кодами.}

JavaScript

Спробуйте самі на JSFiddle .

Ви можете відфільтрувати вхідні значення тексту <input>за допомогою наступної setInputFilterфункції (підтримує Copy + Paste, Drag + Drop, комбінації клавіш, операції з контекстним меню, нестандартні клавіші, положення каретки, різні розкладки клавіатури та всі браузери з IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

Тепер ви можете використовувати setInputFilterфункцію для встановлення вхідного фільтра:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Дивіться демонстрацію JSFiddle для отримання додаткових прикладів фільтрів. Також зверніть увагу, що ви все ще повинні зробити перевірку на стороні сервера!

TypeScript

Ось версія TypeScript цього.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Існує також версія jQuery цього. Дивіться цю відповідь .

HTML 5

HTML 5 має власне рішення з <input type="number">(див. Специфікацію ), але зауважте, що підтримка браузера варіюється:

• Більшість веб-переглядачів підтверджують введення лише під час подання форми, а не під час введення.
• Більшість мобільних браузерів не підтримують step, minі maxатрибути.
• Chrome (версія 71.0.3578.98) все ще дозволяє користувачеві вводити символи eта Eв поле. Дивіться також це питання .
• Firefox (версія 64.0) та Edge (EdgeHTML версія 17.17134) все ще дозволяють користувачеві вводити будь-який текст у поле.

Спробуйте самі на w3schools.com .

Використовуйте цей DOM

<input type='text' onkeypress='validate(event)' />

І цей сценарій

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Я довго і наполегливо шукав гарну відповідь на це, і ми відчайдушно потребуємо <input type="number", але, окрім цього, ці 2 - це найбільш стислі способи, які я міг би придумати:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Якщо ви не любите неприйнятий символ, який відображається на частку секунди перед тим, як стерти, наведений нижче метод - це моє рішення. Зверніть увагу на численні додаткові умови, щоб уникнути відключення різного роду навігаційних та гарячих клавіш. Якщо хтось знає, як це ущільнити, повідомте нам!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Ось простий, який дозволяє ввести рівно один десятковий, але не більше:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

І ще один приклад, який для мене чудово працює:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Також додайте до події натискання клавіші

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

І HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Ось приклад jsFiddle

HTML5 має <input type=number>, що звучить саме для вас. Наразі лише Opera підтримує це на самому світі, але є проект, який має реалізацію JavaScript.

Більшість відповідей тут мають слабкість використання ключових подій .

Багато відповідей обмежують вашу можливість робити вибір тексту за допомогою макросів клавіатури, копіювання + вставлення та більше небажаної поведінки, інші, здається, залежать від конкретних плагінів jQuery, що вбиває мух із кулеметами.

Це просте рішення, здається, найкраще працює для мене на всій платформі, незалежно від механізму введення (натискання клавіші, копія + вставка, копія правою кнопкою миші + вставка, мова в текст тощо). Усі макроси вибору тексту все ще працюватимуть, і це навіть обмежує можливість встановлення нечислового значення за сценарієм.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Я вирішив використовувати комбінацію двох згаданих тут відповідей, тобто

<input type="number" />

і

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

HTML5 підтримує регулярні вирази, тому ви можете використовувати це:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Попередження: Деякі браузери ще не підтримують це.

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

додатково ви можете додати кома, крапку та мінус (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

Так просто....

// У функції JavaScript (може використовувати HTML або PHP).

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Введіть форму:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

З вхідним макс. (Дане вище дозволяє отримати 12-значний номер)

2 рішення:

Використовуйте валідатор форми (наприклад, з плагіном перевірки jQuery )

Зробіть перевірку під час події onblur (тобто, коли користувач залишає поле) поля введення з регулярним виразом:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Більш безпечний підхід - це перевірка значення вводу, замість того, щоб викрадати натискання клавіш і намагатися фільтрувати keyCodes.

Таким чином користувач може безкоштовно використовувати стрілки клавіатури, модифікаційні клавіші, повертати назад, видаляти, використовувати нестандартні клавіатури, використовувати мишу, щоб вставити, використовувати перетягування тексту, навіть використовувати входи доступності.

Наведений нижче сценарій дозволяє додатні та від’ємні числа

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: Я видалив свою стару відповідь, тому що вважаю, що вона зараз застаріла.

Ви можете використовувати шаблон для цього:

<input id="numbers" pattern="[0-9.]+" type="number">

Тут ви можете ознайомитись із усіма порадами щодо інтерфейсу мобільного веб-сайту .

Нижче ви знайдете згадане рішення. У цьому користувач може бути в змозі ввести тільки numericзначення, також користувач не може бути в змозі copy, paste, dragі dropна вході.

Дозволені персонажі

0,1,2,3,4,5,6,7,8,9

Не дозволено символів та персонажів через події

• Алфавітне значення
• Спеціальні символи
• Скопіювати
• Вставити
• Перетягніть
• Крапля

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Повідомте мене, якщо це не працює.

Якщо ви хочете запропонувати пристрою (можливо, мобільному телефону) між алфавітою або цифрою, ви можете використовувати <input type="number">.

Ще один приклад, коли в поле введення можна додати лише числа, не може бути літер

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Коротка та приємна реалізація, використовуючи jQuery та заміну () замість того, щоб дивитись на event.keyCode або event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Лише невеликий побічний ефект від того, що набраний лист з’являється на мить, а CTRL / CMD + A, здається, веде себе трохи дивно.

input type="number" є атрибутом HTML5.

В іншому випадку це допоможе вам:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

JavaScript-код:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML-код:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

прекрасно працює, тому що клавіатурний код зворотної області дорівнює 8, а вираз регулярного виразу це не дозволяє, тому це простий спосіб обійти помилку :)

Простий спосіб вирішити цю проблему - реалізація функції jQuery для перевірки повторним вираженням символів, введених у текстовому полі, наприклад:

Ваш html-код:

<input class="integerInput" type="text">

І функція js використовує jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

Просто інший варіант з використанням jQuery

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

просто використовуйте type = "number", тепер цей атрибут підтримується в більшості браузерів

<input type="number" maxlength="3" ng-bind="first">

Ви також можете порівняти вхідне значення (яке за замовчуванням трактується як рядок) з примусовим як числове, наприклад:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Однак вам потрібно прив’язати це до події, як-от клавіатура тощо.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Я бачив кілька чудових відповідей, проте мені подобаються їх як можна дрібніші та простіші, тому, можливо, хтось від цього виграє. Я б використовував JavaScript Number()і isNaNфункціональність, як це:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Сподіваюсь, це допомагає.

Використовуйте цей DOM:

<input type = "text" onkeydown = "validate(event)"/>

І цей сценарій:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... АБО цей сценарій, без indexOf, використовуючи два for's ...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Я використовував атрибут onkeydown замість onkeypress, тому що атрибут onkeydown перевіряється перед атрибутом onkeypress. Проблема полягає в браузері Google Chrome.

Завдяки атрибуту "onkeypress" TAB буде некерованим з "предотвратиDefault" на Google Chrome, проте з атрибутом "onkeydown" TAB стає керованим!

Код ASCII для TAB => 9

Перший скрипт має менше коду, ніж другий, однак у масиві символів ASCII повинні бути всі ключі.

Другий скрипт набагато більший, ніж перший, але масиву потрібні не всі клавіші. Перша цифра у кожній позиції масиву - це кількість разів, коли кожна позиція буде прочитана. Для кожного читання буде збільшено 1 на наступне. Наприклад:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




У випадку числових ключів лише 10 (0 - 9), але якби їх було 1 мільйон, не було б сенсу створювати масив з усіма цими клавішами.

Коди ASCII:

• 8 ==> (Backspace);
• 46 => (Видалити);
• 37 => (стрілка вліво);
• 39 => (стрілка праворуч);
• 48 - 57 => (числа);
• 36 => (додому);
• 35 => (кінець);

Це вдосконалена функція:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Найкращий спосіб (дозволити ВСІ типи чисел - реальні негативні, реальні додатні, цілі від’ємні, цілі позитивні):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Це розширена версія рішення geowa4 . Підтримка minта maxатрибути. Якщо число виходить за межі діапазону, буде показано попереднє значення.

Ви можете протестувати його тут.

Використання: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Якщо входи динамічні, використовуйте це:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});