限制textarea的不接受250個字符

Question

我在C＃中的textarea，請參見下面的代碼：

<asp:Label ID="lblQuestions" runat="server" CssClass="addinfo"> 
        Question & Comments</asp:Label> 
<asp:TextBox ID="txtQuestions" Rows="5" Columns="5" TextMode="MultiLine" runat="server" MaxLength="250"></asp:TextBox> 

現在我想的是textarea的不應該接受超過250個字符，任何用戶都COPY &料漿，寫和DRAG & DROP等，如果用戶試圖複製或拖動多於250個字符，應該在textarea中複製前250個字符。我知道TEXTAREA中沒有MAXLENGTH屬性。如果.NET不可能，那麼使用javascript或Jquery的解決方案就可以工作。

請幫

Answer 1

你必須線功能的事件

onpaste，和的onkeyup爲聚焦狀態，你想要做這個動作的區域。

對於一個asp文本框，我認爲你必須考慮只有OnTextChanged事件。

對於textarea的

<INPUT id="counterMessage" readOnly size="3" value="250" name="counterMessage">                          
<TEXTAREA onpaste="PasteCounter(this.form.txtAreaMessage,this.form.counterMessage,250);" 
                                  id="txtAreaMessage" onkeyup="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);" 
                                  style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 99%; BORDER-BOTTOM: 0px; HEIGHT: 95px; TEXT-ALIGN: justify" 
                                  onfocus="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);" name="txtAreaMessage" 
                                  rows="3" runat="server"></TEXTAREA> 


function PasteCounter(field, countfield, maxlimit) 
     { 
      var len; 
      var txt = clipboardData.getData("Text"); 
      txt = field.value + txt 
      len = parseInt(txt.length); 
      if (len > maxlimit) 
      { 
       event.returnValue=false; 
       txt = txt.substring(0, maxlimit);  
       field.value = txt;     
       alert("Only " + maxlimit + " characters are allowed"); 
      } 
      countfield.value = maxlimit - txt.length; 
     }  
     function textCounter(field, countfield, maxlimit) 
     { 
      if (field.value.length > maxlimit) 
      {  
       field.value = field.value.substring(0, maxlimit); 
       alert("Only " + maxlimit + " characters are allowed"); 
      } 
      countfield.value = maxlimit - field.value.length; 
     } 

的countfield文本框是用於示出剩餘的字符。

Answer 2

1）一個非常簡單的方式來處理，這是開始與onChange事件：

<textarea id="yourTextArea" onchange="this.value.length = Math.min(this.value.length, 250)"></textarea> 

主要這裏的缺點是textarea的將不會更新，直到焦點離開文本區域。

2）您應該能夠將上述示例調整爲表單驗證函數，該函數在窗體的onSubmit事件上觸發。

<script type="text/javascript"> 
    document.forms[0].onsubmit = function() { document.getElementById("yourTextArea").value.length = Math.min(this.value.length, 250); } 
</script> 

3）如果你想在服務器端做這個驗證，你真的只需要得到textarea的值並截斷它。

string validText = yourTextArea.Value.Substring(0, 250); 

Answer 3

對於交互反饋，你應該做上述在JavaScript中，因爲直到它被回發到服務器（需要重新加載頁面）有線控制不動作。如果您更新每個按鍵的字符數，這可能會導致相當多的服務器負載。

下面是一個粗略的js實現，它將簡單地計算每次更改時的ASCII字符數。

<script type="text/javascript"> 
function countWords() { 
var text = document.getElementById("txtBox1").value; 
if (text.length > 250) text = text.substr(0,250); 
document.getElementById("txtBox1").value = text; 
} 
</script> 

<textarea id="txtBox1" onkeyup="countWords();" >text here</textarea> 

Answer 4

您可以用ASP.NET驗證也這麼做：如果textarea的修改，由於剪切和粘貼這也將工作

<asp:TextBox ID="MyTextBox" runat="server" TextMode="MultiLine" Rows="4" /> 
<asp:RegularExpressionValidator Display="Dynamic" ID="RegularExpressionValidator1" ControlToValidate="MyTextBox" Text="<p>A maxiumum of 250 characters is allowed.</p>" runat="server" ValidationExpression="^(.|\s){0,250}$" /> 

Answer 5

<asp:TextBox 
    onkeypress="return value.length<=10;" 
    onpaste="return (value.length+clipboardData.getData('Text').length)<=10" 
    TextMode="MultiLine" 
    runat="server" 
/> 

Answer 6

您可以使用jQuery綁定到多個事件一次

$("#txtQuestions").bind("keyup change blur input paste", function() { 
    // fire this off a few ms after the event happens 
    setTimeout(
    (function(el){ // closure to store "this" as "el" 
    return function() { if (el.value.length>250) el.value.length = 250; } 
    })(this), 10); 
}); 

有一個library (jQuery.charcounter)在那裏，會自動添加字符REM還有什麼不是DOM。

Answer 7

擴大對@ gnarf的回答是：

<textarea class="max-length" cols="30" id="comment-box" maxlength="250" rows="10"></textarea></span> 
<span id="comment-box-chars-left">250</span> characters left 
<script type="text/javascript> 
    function updateCharsLeft(id, maxChars, length) { 
     $('#' + id + '-chars-left').html(maxChars - length); 
    } 

    $(document).ready(function() { 
     $('.max-length').each(function() { 
      updateCharsLeft($(this).attr('id'), $(this).attr('maxLength'), $(this).val().length); 
     }); 

     $('.max-length').bind('keyup change blur input paste', function() { 
      var maxChars = $(this).attr('maxLength'); 

      // fire this off a few ms after the event happens 
      setTimeout((function(el) { // closure to store "this" as "el" 
       return function() { 
        if (el.value.length > maxChars) { 
         el.value = el.value.substring(0, maxChars); 
        } 
        updateCharsLeft(el.id, maxChars, el.value.length); 
       } 
      })(this), 10); 
     }); 
    }); 
</script> 

它使用一個屬性，指定字符的最大數量，並更新標籤顯示的字符數離開爲好。文本區域必須被賦予max-length類，並且將顯示剩餘字符數的元素必須與附加了-chars-left的相應文本區域具有相同的id。