Ograniczanie Textarea nieprzyjęcia 250 znaków

Question

Mam textarea w języku C#, można znaleźć poniżej kodu:

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

Teraz chcę, że textarea nie należy przyjmować więcej niż 250 znaków, co użytkownik kopiować & pasty, przez PISANIE i DRAG & DROP itp., Jeśli użytkownik spróbuje skopiować lub przeciągnąć & upuścić więcej niż 250 znaków, pierwsze 250 znaków powinno zostać skopiowane w polu tekstowym. Wiem, że nie ma atrybutu MAXLENGTH w TEXTAREA. Jeśli nie jest to możliwe z .NET, to rozwiązanie z javascript lub Jquery zadziała.

Proszę o pomoc

Answer 1

Trzeba funkcji drutu dla zdarzeń

onpaste, onkeyup i onfocus obszaru, dla którego chcesz wykonać tę czynność.

Dla textbox asp, myślę, że musisz wziąć pod uwagę tylko zdarzenia OnTextChanged.

Dla 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 tekstowe jest za pokazanie pozostałe znaki.

Answer 2

1) Bardzo prosty sposób obsłużyć to jest rozpoczęcie imprezy onChange:

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

Główną wadą jest to, że textarea nie aktualizuje aż ostrość opuścił textarea.

2) Powinieneś być w stanie dostosować powyższy przykład do funkcji sprawdzania poprawności formularza, która uruchamia się w zdarzeniu onSubmit formularza.

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

3) Jeśli chcesz to zrobić walidację po stronie serwera, to naprawdę wystarczy, aby uzyskać wartość pola tekstowego i obciąć go.

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

Answer 3

Interaktywnej sprzężenia zwrotnego, należy wykonać powyższe javascript, jak kontrole przewodowe nie zareaguje, dopóki nie zostanie wysłane z powrotem do serwera (wymagająca przeładowania strony). Może to spowodować sporo obciążenia serwera, jeśli zaktualizujesz liczbę znaków przy każdym naciśnięciu klawisza.

Poniżej znajduje się przybliżona implementacja js, która po prostu policzy liczbę znaków ASCII przy każdej zmianie. To będzie również działać, jeśli textarea jest modyfikowana z powodu wycinania i wklejania:

<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

Można to zrobić za pomocą walidatora ASP.NET, a także:

<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

Można użyć jQuery wiążą się z wieloma wydarzeniami naraz

$("#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); 
}); 

jest library (jQuery.charcounter) że obecnie nie będzie automatycznie dodać rem znaków a także co do DOM.

Answer 7

Rozwijając na odpowiedź @ Gnarf za:

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

ta wykorzystuje atrybut, aby określić maksymalną liczbę znaków i aktualizuje etykietę wyświetlając liczbę znaków w lewo, jak również. Obszar tekstowy musi mieć klasę max-length, a element, który wyświetli liczbę pozostałych znaków, musi mieć ten sam identyfikator, co odpowiadający mu obszar tekstu z dołączonymi do niego -chars-left.