Javascript textarea字限制

Question

我知道HTML有maxlength屬性，但是我想限制字數鍵入的不是字符數。

經過10個單詞後，用戶應該可以將光標左移&編輯文本，但不能添加任何更多單詞。

那麼我該如何停止光標？

有什麼建議嗎？

只有javascript請。

Answer 1

這並不涵蓋所有可能的用戶操作，但是我覺得很無聊，也許你會學到一些東西：

HTML：

<textarea id="input_box"></textarea> 

的JavaScript：

function check_words(e) { 
    var BACKSPACE = 8; 
    var DELETE  = 46; 
    var MAX_WORDS = 10; 
    var valid_keys = [BACKSPACE, DELETE]; 
    var words  = this.value.split(' '); 

    if (words.length >= MAX_WORDS && valid_keys.indexOf(e.keyCode) == -1) { 
     e.preventDefault(); 
     words.length = MAX_WORDS; 
     this.value = words.join(' '); 
    } 
} 

var textarea = document.getElementById('input_box'); 
textarea.addEventListener('keydown', check_words); 
textarea.addEventListener('keyup', check_words); 

試試吧對JS Bin：http://jsbin.com/isikim/2/edit

• 如果textarea中有10個單詞並且用戶按下某個鍵，則不會發生任何事情。
• 如果用戶嘗試複製並粘貼大塊文本，textarea的內容將立即被分解爲10個單詞。

其實，我不確定這是否完美並不重要。由於JavaScript運行在客戶端上，你只需要一些適用於普通用戶的東西。惡意用戶可以隨時使用JavaScript進行操作;沒有辦法繞過。只要你在服務器上做real衛生，應該沒有問題。

Answer 2

（現在的問題是不完全清楚......我假設它的意思是「我怎麼防止用戶在輸入文本區域超過十個字？」）

我想你會掙扎爲了達成這個。比如說粘貼呢？

下面是一個可供選擇的建議，它可能適合你正在做的事情：現代用戶界面（例如Twitter）處理這個問題的一種方式是建立一個字母數或字數，一旦你變成紅色已經超過了限制。如果您嘗試提交表單，則會出現錯誤。這比試圖阻止用戶首先輸入超過10個單詞要容易得多。

Answer 3

HTML5驗證了任務，取得這樣的：

<input 
    pattern="([\w]+\s?){0,5}" 
    onkeypress="if(!this.validity.valid){this.value=this.value.slice(0,-1);return false;}"/> 

如果它提交，則可以省略onkeypress事件處理程序，好像有什麼東西是無效的表單不會提交。

可以使用多填充來支持使用此語法的舊瀏覽器。

Answer 4

像@sgroves這個答案只是爲了好玩:)

$(document).ready(function(){ 

    $('textarea').on('keydown', function(e){ 
    // ignore backspaces 
    if(e.keyCode == 8) 
     return; 

    var that = $(this); 
    // we only need to check total words on spacebar (i.e the end of a word) 
    if(e.keyCode == 32){ 
     setTimeout(function(){ // timeout so we get textarea value on keydown 
     var string = that.val(); 
     // remove multiple spaces and trailing space 
     string = string.replace(/ +(?=)| $/g,''); 
     var words = string.split(' '); 
     if(words.length == 10){ 
      that.val(words.join(' ')); 
     } 
     }, 1); 
    } 
    }); 
});