只允許HTML字段以某些詞開頭

Question

是否有一個快速的JavaScript庫或代碼，只允許用戶使用預設的單詞選擇來啓動表單輸入？

例如，它將允許用戶啓動單詞「是」或「什麼」，但不是「爲什麼」。

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; 
} 

當然，你也可以使用正則表達式壽我想這是一個小效率越低。

像這樣的事情？：http://jsfiddle.net/4jasrbob/

Answer 3

您可以使用下面的正則表達式。 （這確實是原始的，應該根據自己的情況下得到改善。）

^(Why|Are).*$ 

HTML5輸入模式例如：

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

測試here。

Answer 4

非常相似，Strah的答案，但在這裏它是無論如何：

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> 

這允許用戶被賦予錯誤之前至少輸入一個單詞。還應該給他們一些屏幕上的提示，讓他們知道要使用哪些單詞，而不是先弄錯（這一定會發生很多）。