Restringir el Área de texto para no aceptar 250 caracteres

Question

Tengo un área de texto en C#, por favor ver más abajo código:

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

Ahora quiero que área de texto no debe aceptar más de 250 caracteres, cualquiera que sea el usuario realizará la Copia & PASTA, por ESCRITURA y ARRASTRE & DROP, etc., si el usuario intenta copiar o arrastrar & soltar más de 250 caracteres, los primeros 250 caracteres se deben copiar en textarea. Sé que no hay ningún atributo MAXLENGTH en TEXTAREA. Si no es posible con .NET, la solución con javascript o Jquery funcionará.

Por favor, ayudar a

Answer 1

Tienes que funciones de alambre para los eventos

onpaste, onkeyup y onfocus de la zona para la que desea hacer esta acción.

Para un cuadro de texto asp, creo que debe considerar solo el evento OnTextChanged.

Por área de texto

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

El cuadro de texto countfield es para mostrar caracteres restantes.

Answer 2

1) Una forma muy sencilla de manejar esto es comenzar con el evento onchange:

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

El mayor inconveniente aquí es que el área de texto no se actualizará hasta que el enfoque ha dejado el área de texto.

2) Debería poder adaptar el ejemplo anterior a una función de validación de formulario que se activa en el evento onSubmit del formulario.

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

3) Si usted quiere hacer esta validación en el lado del servidor, lo que realmente necesita para obtener el valor del área de texto y truncará.

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

Answer 3

Para retroalimentación interactiva, usted debe hacer lo anterior en javascript, como controles alámbricos no reaccionarán hasta que se devuelve al servidor (que requiere una recarga de la página). Esto puede ocasionar bastante carga de servidor si actualiza los recuentos de caracteres en cada pulsación de tecla.

A continuación se muestra una implementación de rough js que simplemente contará el número de caracteres ASCII en cada cambio. Esto también funciona si el área de texto se modifica debido a cortar y pegar:

<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

Usted puede hacer esto con un validador de ASP.NET, así:

<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

Puede utilizar jQuery para se unen a varios eventos a la vez

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

hay una library (jQuery.charcounter) por ahí que agregará automáticamente el rem caracteres Aining y lo que no al DOM también.

Answer 7

Ampliando la respuesta de @ 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> 

Este utiliza un atributo, para especificar el número máximo de caracteres y actualiza una etiqueta que muestra el número de caracteres restantes también. El área de texto debe tener la longitud máxima de clase y el elemento que mostrará la cantidad de caracteres restantes, debe tener la misma identificación que el área de texto correspondiente con -chars-left anexado.