可以輸入限制爲html <textarea>？

Question

可能重複：
What is the best way to emulate an HTML input 「maxlength」 attribute on an HTML textarea?

我的問題是可以在<textarea >被配置爲只接受一定數目的字符？我可以在以下JavaScript中執行此操作，但是我正在設計此頁面的人員不需要狀態字段。

我目前的做事方式是我有一個<textarea >，它是一個表單的一部分，它使用一個漂亮的JavaScript函數來填充狀態框中的消息。

我也讀過並發現警報和聲音真的不是提醒人們的方式，所以下面的代碼會在出現錯誤時更改背景顏色（並在適當時進行恢復）。

這裏是代碼：

// Checks Form element TransDesc for overruns past 255 characters. 
function warnOverDescLen() 
{ 
    var misc_text = 
    document.forms["InvGenPayTickets"]["TransDesc"].value; 
    var alert_text = 
    "You cannot enter more than 255 characters. Please remove some information."; 

    var rc = true; 

    if(255 < misc_text.length) 
    { 
    document.forms["InvGenPayTickets"]["trans_status"].value 
     = alert_text; 

    misc_text = misc_text.substring(0, 253); 

    document.forms["InvGenPayTickets"]["TransDesc"].value 
     = misc_text; 

    document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor 
     = "pink"; 
    } 
    else 
    { 
    document.forms["InvGenPayTickets"]["trans_status"].value 
     = ""; 
    document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor 
     = "lightgoldenrodyellow"; 
    } 

    return rc; 
} 

<textarea rows="4" cols="60" name="TransDesc" id="TransDesc" 
onkeypress="return warnOverDescLen();" ></textarea> 

<span style="color: #50081E; font-weight: bold">Status</span> 
<br /> 
<input type=text name="trans_status" id="trans_status" maxwidth="50" 
size="65" /> 

Answer 1

這是HTML5的解決方案，而不是IE9或更早版本（根據this）支持：

<textarea maxlength="255"></textarea> 

因爲你很可能無法支持拖放對於IE9（甚至可能是IE8），建議您將它與JavaScript結合起來，以防止textarea上的​​和paste事件的默認行爲，如standup75的建議。

這裏是如何做到這一點與普通的JavaScript：

<textarea id="txtarea" maxlength="255"></textarea> 
<script> 
var field = document.getElementById('txtarea'); 
if(field.addEventListener) { 
    field.addEventListener('keydown', enforceMaxlength); 
    field.addEventListener('paste', enforceMaxlength); 
} else { 
    // IE6-8 
    field.attachEvent('onkeydown', enforceMaxlength); 
    field.attachEvent('onpaste', enforceMaxlength); 
} 

function enforceMaxlength(evt) { 
    var maxLength = 255; 
    if(this.value.length >= maxLength) { 
     evt.preventDefault() 
    } 
} 
</script> 

http://jsfiddle.net/snJwn/

Answer 2

HTML5提供了最大長度屬性。否則，你需要一些JavaScript，jQuery中，你會做這樣的事情

maxLength = 50; 
$("textarea").on("keydown paste", function(e){ 
    if ($(this).val().length>=maxLength) e.preventDefault(); 
}); 

Answer 3

可以使用maxlength="255"（它指定允許在元素的最大字符數。）

，或者你也可以通過jQuery的here做到這一點，我發現教程

HTML

<textarea cols="30" rows="5" maxlength="10"></textarea> 

的jQuery

jQuery(function($) { 

    // ignore these keys 
    var ignore = [8,9,13,33,34,35,36,37,38,39,40,46]; 

    // use keypress instead of keydown as that's the only 
    // place keystrokes could be canceled in Opera 
    var eventName = 'keypress'; 

    // handle textareas with maxlength attribute 
    $('textarea[maxlength]') 

    // this is where the magic happens 
    .live(eventName, function(event) { 
     var self = $(this), 
      maxlength = self.attr('maxlength'), 
      code = $.data(this, 'keycode'); 

     // check if maxlength has a value. 
     // The value must be greater than 0 
     if (maxlength && maxlength > 0) { 

     // continue with this keystroke if maxlength 
     // not reached or one of the ignored keys were pressed. 
     return (self.val().length < maxlength 
       || $.inArray(code, ignore) !== -1); 

     } 
    }) 

    // store keyCode from keydown event for later use 
    .live('keydown', function(event) { 
     $.data(this, 'keycode', event.keyCode || event.which); 
    }); 

}); 

Live example