Не разрешайте вставку любых буквенно-цифровых символов

Question

Я не хочу, чтобы пользователь разрешал вставку любых не буквенно-цифровых символов в текстовое поле.Как я могу ограничить это в Javascript?Спасибо !!

Answer 1

Используя jQuery, это один из способов сделать это:

HTML:

​<form name='theform' id='theform' action=''>
<textarea id='nonumbers' cols='60' rows='10'> </textarea>
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JavaScript:

$().ready(function(){
    $("textarea#nonumbers").keyup(removeextra).blur(removeextra);
});
function removeextra() {
    var initVal = $(this).val();
    outputVal = initVal.replace(/[^0-9a-zA-Z]/g,"");       
    if (initVal != outputVal) {
        $(this).val(outputVal);
    }
};

Попробуйте здесь.

РЕДАКТИРОВАТЬ: Как отмечено в комментариях, оригинал (с использованием события .keyup ()) оставил бы открытой возможность вставки через контекстное меню мыши, поэтому я добавил событие .blur (). .change () тоже был бы возможен, но есть сообщения о проблемах. Другой вариант использует .focusout (). Время экспериментировать ...

Answer 2

Вы можете использовать событие onblur текстового поля.

function remove()
{
  var otxt=document.getElementById('txt1'); 

var val=otxt.value;

 for(i=0;i<val.length;i++)
   {
     var code=val.charCodeAt(i);
     if(!(code>=65 && code<=91) && !(code >=97 && code<=121) && !(code>=48 && code<=57))
         { otxt.value=""; return ; }    

   }
}


<input type="text" id="txt1" onblur="remove();" />

Оно удалит все значения текстового поля при вводе не буквенно-цифрового значения.

Answer 3

Почему никто не предложил использовать событие OnPaste?Это полностью поддерживается в IE, Safari и Chrome.

Документы для использования OnPaste в IE

Документы для использования OnPaste в Webkit

В JQuery это будет выглядеть так:

$(input).bind("paste", function(e){ RemoveNonAlphaNumeric(); })

Это покрывает 75% рынка браузеров.

Если вы используете JQuery, OnPaste автоматически нормализуется в Firefox, так чтотам тоже работаетЕсли вы не можете использовать JQuery, есть событие OnInput, которое работает.

Рабочим решением является использование быстрого значения setTimeout, чтобы можно было заполнить свойство значения ввода.

В основном так:

$("input").bind("paste", function(e){RemoveAlphaChars(this, e);});

function RemoveAlphaChars(txt, e)
{
    setTimeout(function()
    {
        var initVal = $(txt).val();

        outputVal = initVal.replace(/[^0-9]/g,"");

        if (initVal != outputVal)
            $(txt).val(outputVal);
    },1);
}

Я проверил это в IE, Chrome и Firefox, и оно работает хорошо.Тайм-аут такой быстрый, что вы даже не видите удаляемых персонажей.

Answer 4

Предполагается:

<textarea id="t1"/>

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

document.getElementById('t1').onchange = function () {
    this.value = this.value.replace(/\W/,'');
}

Answer 5

Лучше проверить форму - проверьте этот замечательный плагин jQuery - http://docs.jquery.com/Plugins/Validation/, и вы можете использовать правило "числа": http://docs.jquery.com/Plugins/Validation/Methods/number. Действительно простая и легко настраиваемая вещь!

Answer 6

Я не уверен, как вы можете предотвратить вставку, но вы можете фильтровать содержимое либо при отправке, либо по событию изменения.