Разрешить только HTML-поле с определенными словами

Question

Есть ли быстрая библиотека javascript или код, который позволил бы пользователю начинать ввод формы с предустановленным выбором слов?

Например, это позволит пользователю начинать слово «Are» или «What», но не «Why».

Answer 1

Вы можете добавить change или input прослушиватель событий к нему и подтвердить его. Чтобы избежать ложных негативов с начальными буквами, вы можете начать проверку после того, как строка ввода содержит пробел. Для этого вам не нужна библиотека. Обычная старая JS выполнит эту работу.

var input = document.getElementById("myinput"); 
input.addEventListener('input', validate); 

function validate(e) { 
    var validStart = ['why', 'when']; 
    var tmpVal; 
    if (this.value.indexOf(' ') !== -1) { 
     tmpVal = this.value.toLowerCase().trim(); 
     if (validStart.indexOf(tmpVal) === -1) { 
      input.classList.add('notvalid'); 
     } else { 
      input.classList.remove('notvalid'); 
     } 
    } else { 
     input.classList.remove('notvalid'); 
    } 
} 

JSFiddle: http://jsfiddle.net/ofx2yhzm/1/

Answer 2

Html:

<form name="myform" method="post" action="#" onsubmit="return validate()"> 
<input type="text" name="val" /> 
<input type="submit" value="Submit" /> 
</form> 

Javascript:

window.validate = function(){ 

data = document.forms['myform']['val'].value; 
var starts = ['hi','he']; 

for (var i = 0; i <= starts.length; i++) 
    if (data.indexOf(starts[i]) === 0) return true; 

return false; 
} 

И, конечно, вы также можете использовать Regex Тхо я предполагаю, что это немного более неэффективна ,

Нечто подобное ?: http://jsfiddle.net/4jasrbob/

Answer 3

Вы можете использовать следующую Regex. (Это действительно примитивно и должно быть улучшено в соответствии с вашим случаем.)

^(Why|Are).*$ 

HTML5 входного образец пример:

<form> 
    <input type="text" pattern="^(Why|Are).*$"> 
    <input type="submit"> 
</form> 

here Test.

Answer 4

Очень похоже на ответ С.Т.Р.А.Х., но здесь это все равно:

function checkValue(el) { 

    // Trim only leading whitespace so responds when first space entered 
    // and break into words 
    var words = el.value.replace(/^\s+/,'').split(/\s+/); 
    // List of allowed words 
    var allowed = ['are','what']; 

    // Element to write message based on source element 
    var msg = document.getElementById(el.id + 'Msg'); 
    // Clear error message by default 
    msg.innerHTML = ''; 

    // Only do something if at least one word has been entered 
    // Could also check if first word has more letters than 
    // longest allowed word 
    if (words.length > 1) { 

    // Check if first word is allowed 
    if (allowed.indexOf(words[0].toLowerCase()) == -1) { 
     msg.innerHTML = 'Input must start with one of ' + allowed.join(', '); 
    } 
    } 
} 

Некоторая разметка:

<input id="foo" oninput="checkValue(this);"> 
<span id="fooMsg"></span> 

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