Как разрешить пользователю вводить только строку?

function EnterCandidates() {
  var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
    names = document.querySelectorAll('label[for^=V][id^=L_V]');

  Array.prototype.forEach.call(names, function(label, index) {
    if (candidateNameInputs[index].value !== candidateNameInputs[index].defaultValue) {
      label.textContent = candidateNameInputs[index].value;
    }
  });
}

У меня есть этот код, который получает ввод пользователей и изменяет метку с ним, но я хочу добавить код, который позволяет пользователю вводить только буквы алфавита. Как я могу это сделать, используя этот код?


javascript validation string html alphabetical
person erohs2000    schedule 12.09.2015    source источник
comment
Получите диапазон ascii для всех букв, которые вы хотите, и предотвратите поведение по умолчанию, когда при нажатии клавиши значение не находится в этом диапазоне (используя javascript).   -  person Bryan    schedule 12.09.2015
comment
Позвольте им вводить что угодно, а затем покажите им, что они на самом деле отправляют: jsfiddle.net/g1Lbh905.   -  person zzzzBov    schedule 12.09.2015
comment
@ erohs2000 Я ответил на этот вопрос и в предыдущем вопросе.   -  person tech-gayan    schedule 12.09.2015

Ответы (5)


arrow_upward
2
arrow_downward

Если вы используете современные браузеры, то проверка пользователя html5 -

<input type="text" name="name" class="field" pattern="[a-zA-Z ]+" />

Он принимает a-z и A-Z плюс пробел

person Vishnu Atrai    schedule 12.09.2015
comment
Я не думаю, что это работает, потому что он не показывает, что он красный. - person erohs2000; 12.09.2015
comment
вы нигде не упомянули "красную" часть - person Muhammad Umer; 12.09.2015

arrow_upward
0
arrow_downward

прослушайте событие keyDown и сопоставьте это регулярное выражение:

/[a-zA-Z]+/

если вы ориентируетесь только на современные браузеры, вы можете попробовать следующее:

<input type="text" pattern="[a-zA-Z]" title="Only letters" />
person Chris    schedule 12.09.2015

arrow_upward
0
arrow_downward

вы не можете избежать того, что пользователь вводит небуквенные символы. Но вы можете: - управлять полями ввода (onkeydown) и проверять, есть ли символы, которые вам не нужны Stackoverflow - заставить вводить только буквенные буквы - сделать то же самое перед меткой.textContent = CandyNameInputs[index].value; строку и отфильтровать/заменить символы, которые вам не нужны

person Wolfgang    schedule 12.09.2015

arrow_upward
0
arrow_downward 

var val = document.getElementById('id').value;

if (!val.match(/^[a-zA-Z]+$/)) 
{
alert('Only alphabets are allowed');
return false;
}

полный сценарий

function EnterCandidates() {
console.log('woo');
var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
    names = document.querySelectorAll('label[for^=V][id^=L_V]');

Array.prototype.forEach.call(names, function (label, index) {
    if (!candidateNameInputs[index].value.match(/^[a-zA-Z]+$/)) 
     {
         alert('Only alphabets are allowed');
    }
    else
    {
         if (candidateNameInputs[index].value !==  candidateNameInputs[index].defaultValue) {
        label.textContent = candidateNameInputs[index].value;
    }
    }

});
}
person tech-gayan    schedule 12.09.2015
comment
@mail-nv не совсем, особенно для этого варианта использования. - person Muhammad Umer; 12.09.2015
comment
stackoverflow.com/questions/10940137/ - это скорость сопоставления с тестом, и ЭТО ВАЖНО, даже в этом случае! И посмотрите здесь: jsperf.com/regexp-vs-indexof - person Wolfgang; 12.09.2015
comment
да, будет разница, если ваш пользователь будет печатать 600 000 раз в минуту. Тогда у пользователя будет некоторое снижение производительности. - person Muhammad Umer; 12.09.2015
comment
Как сказал Мухаммад Умер, в этом случае проблема с микропроизводительностью. - person tech-gayan; 12.09.2015
comment
@Iceburg Кажется, это зациклилось. Как мне сделать так, чтобы он отображал его только один раз без необходимости пару раз нажимать «ОК»? - person erohs2000; 13.09.2015

arrow_upward
0
arrow_downward

Вот один из способов сделать это с помощью Javascript.

http://jsfiddle.net/q60gm0ra/

var input = document.getElementById('alpha');

input.addEventListener('keypress',function(e) { 
    var str = String.fromCharCode(e.charCode);
    if (!(/[A-Z]|\s/i).test(str)) {
       e.preventDefault();
    }
});
person Muhammad Umer    schedule 12.09.2015
comment
Не могли бы вы сделать то же самое для чисел? - person erohs2000; 13.09.2015
comment
Конечно. просто удалите символ ! - person Muhammad Umer; 13.09.2015
comment
Вводы могут меняться другими способами, кроме нажатия клавиш на клавиатуре, например. с помощью мыши для вставки текста. - person Oriol; 14.09.2015
comment
хороший момент, stackoverflow.com/questions/1226574/ - person Muhammad Umer; 14.09.2015