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

Question

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

Answer 1

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

Числовой ввод

Вот демоверсия http://jsfiddle.net/152sumxu/2

Код ниже (Lib вставлен в строку)

<div id="plugInDemo" class="vMarginLarge">
    <h4>Demo of the plug-in    </h4>
    <div id="demoFields" class="marginSmall">
        <div class="vMarginSmall">
            <div>Any Number</div>
            <div>
                <input type="text" id="anyNumber" />
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //    Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
    (function(b) {
        var c = { allowFloat: false, allowNegative: false};
        b.fn.numericInput = function(e) {
            var f = b.extend({}, c, e);
            var d = f.allowFloat;
            var g = f.allowNegative;
            this.keypress(function(j) {
                var i = j.which;
                var h = b(this).val();
                if (i>0 && (i<48 || i>57)) {
                    if (d == true && i == 46) {
                        if (g == true && a(this) == 0 && h.charAt(0) == "-") {
                            return false
                        }
                        if (h.match(/[.]/)) {
                            return false
                        }
                    }
                    else {
                        if (g == true && i == 45) {
                            if (h.charAt(0) == "-") {
                                return false
                            }
                            if (a(this) != 0) {
                                return false
                            }
                        }
                        else {
                            if (i == 8) {
                                return true
                            }
                            else {
                                return false
                            }
                        }
                    }
                }
                else {
                    if (i>0 && (i >= 48 && i <= 57)) {
                        if (g == true && h.charAt(0) == "-" && a(this) == 0) {
                            return false
                        }
                    }
                }
            });
            return this
        };
        function a(d) {
            if (d.selectionStart) {
                return d.selectionStart
            }
            else {
                if (document.selection) {
                    d.focus();
                    var f = document.selection.createRange();
                    if (f == null) {
                        return 0
                    }
                    var e = d.createTextRange(), g = e.duplicate();
                    e.moveToBookmark(f.getBookmark());
                    g.setEndPoint("EndToStart", e);
                    return g.text.length
                }
            }
            return 0
        }
    }(jQuery));

    $(function() {
       $("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
    });
</script>

Answer 2

Я использую библиотеку jquery.inputmask.js, которую вы можете загрузить с NuGet . В частности, я использую jquery.inputmask.regex.extensions.js, который поставляется вместе с ним.

Я даю входному элементу класс, в данном случае reg:

<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>

А потом в JavaScript я установил маску:

var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

Это только для цифр, но вы можете изменить регулярное выражение для принятия ".".

При использовании этого невозможно вводить символы, которые не являются цифрами. Полезно иметь эти библиотеки входных масок для общего форматирования.

Answer 3

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

Answer 4

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

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

Answer 5

Вот хорошее простое решение, которое мне нравится использовать:

function numeric_only (event, input) {
    if ((event.which < 32) || (event.which > 126)) return true; 
    return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;

<input type="text" onkeypress="return numeric_only (event, this);" />

Пояснение:

Использование «event.which» - сначала определите, является ли это печатный символ. Если это не так, разрешите это (для таких вещей, как удаление и возврат). В противном случае объедините символ в конец строки и протестируйте его с помощью функции jQuery isNumeric. Это отнимает всю скуку от тестирования каждого отдельного персонажа и также работает для сценариев вырезания / вставки.

Если вы хотите стать действительно симпатичным, вы можете создать новый тип ввода HTML. Давайте назовем его «числовым», чтобы вы могли иметь тег:

<input type="numeric" />

, который допускает только числовые символы. Просто добавьте следующую команду «document.ready»:

$(document).ready (function () {
    $("input[type=numeric]").keypress (function (event) {
        if ((event.which < 32) || (event.which > 126)) return true; 
        return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
    });// numeric.keypress;
});// document.ready;

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

Answer 6

Это простое решение

Замените .price-input input.quantity на класс вашего входного поля

$(".price-input input.quantity").on("keypress keyup blur",function (event) {    
       $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });

Answer 7

Использование:

<script>
    function onlyNumber(id){ 
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

И если вы хотите обновить значение после нажатия клавиши, вы можете изменить onChange для onKeypress , onKeyDown или onKeyup . Но событие onKeypress не запускается ни в одном браузере.

Answer 8

Дайте в поле ввода класс (<input class="digit" ...>) и используйте jquery, как показано ниже.

jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

Приведенный выше код также работает для отключения специальных символов в Ctrl+V штрихах и right click штрихах.

Answer 9

У меня может быть другой (простой) обходной путь для этого ...

Поскольку String.fromCharCode (key) возвращает странные вещи на клавиатуре AZERTY (цифровая клавиатура возвращает код в виде g для 1 и 1 для & символа ..

Я понял, что перехват окончательного значения keyup во входных данных для сброса его в произвольное значение является более простым, легким и защищенным от ошибок методом (его также можно выполнить с помощью некоторого регулярного выражения ..., чтобы сохранить десятичные дроби и так далее ... ... не нужно фильтровать другие события Ctrl, Home, Del и Enter ...)

Использование с JQ:

<input class='pn'>
<script>
function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>

Атрибут Onkeyup:

<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>

Answer 10

Код ниже также проверит событие ПАСТА .
Раскомментируйте " ruleSetArr_4 " и добавьте (concate) к " ruleSetArr ", чтобы разрешить FLOAT числа.
Простая функция копирования / вставки. Вызовите его с вашим входным элементом в параметре.
Пример: inputIntTypeOnly($('input[name="inputName"]'))

function inputIntTypeOnly(elm){
    elm.on("keydown",function(event){
        var e = event || window.event,
            key = e.keyCode || e.which,
            ruleSetArr_1 = [8,9,46], // backspace,tab,delete
            ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57],	// top keyboard num keys
            ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
            ruleSetArr_4 = [17,67,86],	// Ctrl & V
          //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
            ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4);	// merge arrays of keys
		
            if(ruleSetArr.indexOf() !== "undefined"){	// check if browser supports indexOf() : IE8 and earlier
                var retRes = ruleSetArr.indexOf(key);
            } else { 
                var retRes = $.inArray(key,ruleSetArr);
            };
            if(retRes == -1){	// if returned key not found in array, return false
                return false;
            } else if(key == 67 || key == 86){	// account for paste events
                event.stopPropagation();
            };

    }).on('paste',function(event){
        var $thisObj = $(this),
            origVal = $thisObj.val(),	// orig value
            newVal = event.originalEvent.clipboardData.getData('Text');	// paste clipboard value
        if(newVal.replace(/\D+/g, '') == ""){	// if paste value is not a number, insert orig value and ret false
            $thisObj.val(origVal);
            return false;
        } else {
            $thisObj.val(newVal.replace(/\D+/g, ''));
            return false;
        };
		
    });
};

var inptElm = $('input[name="inputName"]');

inputIntTypeOnly(inptElm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="inputName" value="1">