Ограничить символы в поле ввода

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

EDIT: Я не хочу менять код, потому что это отлично работает на планшетах (другие функции ограничения символов не работают). Единственная проблема заключается в том, что delay wehn вы нажимаете ограниченные символы

Код:

function checkInput(ob){
    var invalidChars = /[^0-9]/gi
            if(invalidChars.test(ob.value)) {
                    ob.value = ob.value.replace(invalidChars,"");
          }
};

HTML:

<input class="input" maxlength="1" onChange="checkInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off"/>

Ответ 1

вы можете использовать эту функцию,

$('.input').keyup(function () {
    if (!this.value.match(/[0-9]/)) {
        this.value = this.value.replace(/[^0-9]/g, '');
    }
});

СМОТРЕТЬ ДАННОЕ ДЕТО FIDDLE

Обновлено:

Вы можете попробовать этот код,

$(document).ready(function() {
    $(".input").keydown(function (e) {
        // Allow: backspace, delete, tab, escape and enter
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === 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();
        }
    });
});

ИСТОЧНИК

СМОТРЕТЬ ОБНОВЛЕНО FIDDLE DEMO

ОБНОВЛЕНО ДЛЯ ANDROID:

<EditText
android:id="@+id/editText1"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_marginTop="58dp"
android:layout_toRightOf="@+id/textView1"
android:maxLength="1" >
</EditText>

Я думаю, что это может помочь вам... используя android:inputType="number", вы можете это сделать.

Ответ 2

Комбинация событий нажатия и вставки делает трюк:

var text = document.getElementById('text');
text.onkeypress = text.onpaste = checkInput;

function checkInput(e) {
    var e = e || event;
    var char = e.type == 'keypress' 
        ? String.fromCharCode(e.keyCode || e.which) 
        : (e.clipboardData || window.clipboardData).getData('Text');
    if (/[^\d]/gi.test(char)) {
        return false;
    }
}

<input class="input" maxlength="10" id="text" type="text" autocomplete="off" />

Ответ 3

Вот немного взлома, вы можете попробовать: DEMO

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

function checkInput(ob) {
    var invalidChars = /[^0-9]/gi
    if (invalidChars.test(ob.value)) {
        ob.value = ob.value.replace(invalidChars, "");
    }
    else {
        document.getElementById('yourinput').style.color = '#000';
    }
};

function hideInput(ob) {
    document.getElementById('yourinput').style.color = '#FFF';
};

HTML

<input id="yourinput" class="input" maxlength="1" onKeydown="hideInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />

CSS

input {color:#FFF;}

Ответ 4

проверьте этот код,

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

Ответ 5

<input id="testInput"></input>

<script>
testInput.onchange = testInput.oninput = restrict;

function restrict() {
    testInput.value = testInput.value.replace(/[^a-z]/g, "");
}
</script>

Я придумал что-то немного другое. oninput вместо onkeyup/onkeydown и onchange вместо onpaste.