javascript - телефон - sweetalert2




Ввод текста HTML допускает только числовой ввод (20)

Есть ли быстрый способ установить ввод текста в формате HTML ( <input type=text /> ), чтобы разрешить только числовые нажатия клавиш (плюс «.»)?


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);"/>

HTML5 имеет <input type=number> , который звучит правильно для вас. В настоящее время только Opera поддерживает его изначально, но есть проект с реализацией JavaScript.


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);"/ >

Более безопасный подход - проверка значения входа, а не захват нажатий клавиш и попытка фильтрации ключевых кодов.

Таким образом, пользователь может свободно использовать клавиатурные стрелки, ключи-модификаторы, backspace, delete, использовать нестандартные клавиатуры, использовать мышь для вставки, использовать текст перетаскивания и даже использовать входные данные о доступности.

В приведенном ниже сценарии возможны положительные и отрицательные числа

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: Я удалил свой старый ответ, потому что я думаю, что он устарел сейчас.


Вы можете заменить функцию Shurok:

$(".numeric").keypress(function() {
    return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});


Если вы хотите предложить устройству (возможно, мобильный телефон) между буквой или цифрой, вы можете использовать <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');">

Используйте этот 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 ...

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 будет неконтролируемым с «preventDefault» на 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 => (home);
  • 35 => (конец);

Используйте эту 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();
  }
}

Коротка и слабая реализация с использованием jQuery и replace () вместо того, чтобы смотреть на event.keyCode или event.which:

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

Только небольшой побочный эффект, который набирает буква на мгновение, и CTRL / CMD + A, похоже, немного странно.


Наилучший способ (разрешить ВСЕ тип чисел - реальный отрицательный, положительный, отрицательный, цельный положительный):

$(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();
    };
}); 

Помните региональные различия (периоды использования евро и запятые в обратном порядке как американцы) плюс знак минус (или соглашение об обертывании числа в круглых скобках, чтобы указать отрицательный), плюс экспоненциальная нотация (я достигаю этого).


Просто другой вариант с использованием jQuery

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

Это расширенная версия решения 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'));
            }
    }); 
});

Это улучшенная функция:

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 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);">


просто используйте type = "number", теперь этот атрибут поддерживается в большинстве браузеров

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

JavaScript (самый надежный еще)

Хотя это просто, он не позволит вам использовать комбинационные клавиши и другие непечатаемые ключи. Для полного решения JavaScript, которое также поддерживает ввод номера типа и проверки максимальной длины, рассмотрите возможность использования этого Polyfill .

HTML 5 с <!DOCTYPE html> имеет собственное решение :

<input type="number">

Помните, что в некоторых браузерах он не работает стандартным образом .

Попробуйте ввести type = number, чтобы увидеть версию HTML5 в действии.

См. Также https://github.com/jonstipe/number-polyfill для прозрачной поддержки в старых браузерах.

JQuery

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl/cmd+A
            (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+C
            (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+X
            (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // 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();
        }
    });
});

Более сложные параметры проверки

Если вы хотите сделать несколько других битов проверки и частей, это может быть удобно:

http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input

Но не забывайте, что вы все равно должны выполнить проверку на стороне сервера!

для клавиатуры AZERTY:

JQuery

// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+C
    (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+X
    (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39) ||
    //Allow numbers and numbers + shift key
    ((e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105))) {
    // let it happen, don't do anything
    return;
}
// 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();
}

В большинстве ответов здесь есть слабость использования ключевых событий .

Многие из ответов ограничили бы вашу способность делать выбор текста с помощью макросов клавиатуры, копирования + вставки и более нежелательного поведения, другие, похоже, зависят от конкретных плагинов jQuery, которые убивают мух с пулеметами.

Это простое решение, по-видимому, лучше всего подходит для меня кросс-платформой, независимо от механизма ввода (нажатие клавиши, копирование + вставка, копирование правой кнопкой мыши + вставка, речь в текст и т. Д.). Все макросы клавиатуры выбора текста все равно будут работать, и это даже ограничит возможность установки нечислового значения скриптом.

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




html5