Especificar la longitud máxima para el cuadro de texto de varias líneas


78

Estoy tratando de usar asp:

<asp:TextBox ID="txtInput" runat="server" TextMode="MultiLine"></asp:TextBox>

Quiero una forma de especificar la maxlengthpropiedad, pero aparentemente no hay forma posible para un multiline textbox. He estado intentando usar algo de JavaScript para el onkeypressevento:

onkeypress="return textboxMultilineMaxNumber(this,maxlength)"

function textboxMultilineMaxNumber(txt, maxLen) {
    try {
        if (txt.value.length > (maxLen - 1)) return false;
    } catch (e) { }
    return true;
}

Si bien funciona bien, el problema con esta función de JavaScript es que después de escribir caracteres no le permite eliminar y sustituir ninguno de ellos, ese comportamiento no es deseado.

¿Tiene alguna idea de qué podría cambiar en el código anterior para evitar eso o cualquier otra forma de evitarlo?


1
Probé todas las respuestas y la respuesta de scottyboiler es definitivamente la solución ideal. Todos los demás tienen pequeños problemas (no funcionan con copiar y pegar, el parámetro MaxLength no funciona en IE, etc.).
nikib3ro

Segundo @ kape123 aquí. Todos los demás tienen fallas. ¡Después de todo, solo queremos evitar que el campo permita más del límite dado y poder copiar y pegar dentro del límite!
Fandango68

1
@ Fernando68 Me he dado cuenta de que no he vinculado la respuesta; aquí hay un enlace a la solución de scottyboiler que se acerca más a la idea ; todos los demás tienen algunas fallas.
nikib3ro

@ kape123 - ¡muy por delante de ti, amigo! :)
Fandango68

Respuestas:


42

prueba este javascript:

function checkTextAreaMaxLength(textBox,e, length)
{

        var mLen = textBox["MaxLength"];
        if(null==mLen)
            mLen=length;

        var maxLength = parseInt(mLen);
        if(!checkSpecialKeys(e))
        {
         if(textBox.value.length > maxLength-1)
         {
            if(window.event)//IE
              e.returnValue = false;
            else//Firefox
                e.preventDefault();
         }
    }   
}
function checkSpecialKeys(e)
{
    if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40)
        return false;
    else
        return true;
}

En el control, invocalo así:

<asp:TextBox Rows="5" Columns="80" ID="txtCommentsForSearch" MaxLength='1999' onkeyDown="checkTextAreaMaxLength(this,event,'1999');"  TextMode="multiLine" runat="server"> </asp:TextBox>

También puede usar la función checkSpecialKeys para validar la entrada en su implementación de JavaScript.


1
Esto es excelente, excepto que la limitación falla cuando el usuario ingresa retornos de carro. Los retornos de carro no agregan nada al recuento value.length de javascript pero contribuyen al tamaño total de la cadena ('\ n' son dos caracteres). Si su servidor está limitando el tamaño de la cadena, aún obtendrá truncamiento cada vez que alguien use retornos de carro.
srmark

Mi último comentario solo parece aplicarse a ciertos navegadores. IE devuelve un valor de longitud adecuado (incluidos los caracteres de retorno de carro). Webkit no lo hace.
srmark

2
Este código no funciona en el lado del servidor, lo que lo convierte en una solución bastante pobre. El validador de expresiones regulares de Alex Angas es una solución mucho mejor y realmente debería ser la respuesta aceptada ...
George

73

En su lugar, utilice un validador de expresiones regulares . Esto funcionará en el lado del cliente usando JavaScript, pero también cuando JavaScript está deshabilitado (ya que la verificación de longitud también se realizará en el servidor).

El siguiente ejemplo comprueba que el valor introducido tenga entre 0 y 100 caracteres:

<asp:RegularExpressionValidator runat="server" ID="valInput"
    ControlToValidate="txtInput"
    ValidationExpression="^[\s\S]{0,100}$"
    ErrorMessage="Please enter a maximum of 100 characters"
    Display="Dynamic">*</asp:RegularExpressionValidator>

Por supuesto, hay expresiones regulares más complejas que puede utilizar para adaptarse mejor a sus propósitos.


2
tonto limitación de 6 caracteres durante la edición de mensaje puede no alow que arregle falta de coincidencia en expresiones regulares y el mensaje de error - no debe haber "Por favor, introduzca un máximo de 100 caracteres"
Vladislav

1
El único problema que tengo con esta respuesta es que cuando el usuario edita el texto para llevarlo dentro del límite, el mensaje no desaparece, lo que puede ser bastante confuso para el usuario.
Liam Spencer

Si opta por esta solución, le recomiendo activar también la validación al presionar la tecla, lo que hace que el mensaje aparezca y desaparezca a medida que el usuario escribe: fczaja.blogspot.co.uk/2009/07/…
Fiona - myaccessible.website

¿Hay alguna razón en particular por la que esté usando en [\s\S]lugar del más simple .?
Heinzi

1
Acabo de descubrir por qué (de la manera difícil): .no coincide con nuevas líneas, [\s\S] .
Heinzi

27

mantenlo simple. La mayoría de los navegadores modernos admiten un atributo maxlength en un área de texto (incluido IE), así que simplemente agregue ese atributo en el código subyacente. Sin JS, sin Jquery, sin herencia, código personalizado, sin problemas, sin problemas.

VB.Net:

fld_description.attributes("maxlength") = 255

C#

fld_description.Attributes["maxlength"] = 255

1
fld_description.attributes["maxlength"] = 255da un error paraattributes
Barry Michael Doyle

@BarryDoyle Attributes es una propiedad pública de WebControl. ie Pascal Casefld_description.Attributes["maxlength"]
Chronozoa

2
Ésta es la solución correcta, porque está solucionando un error (¿limitación?) En el control web, no una limitación del navegador. La única enmienda que podría hacer es que creo que los atributos son cadenas, por lo que "255" no 255.
Brian Cryer

Esto es lo que estaba buscando. ¡Gracias!
Steve

Esto funcionó para mí en un cuadro de texto de varias líneas llamado "Comentarios": Comments.Attributes.Add ("maxlength", "1000"); (En el evento Page_Load).
James Carr

22

Enrolla tu propio:

function Count(text) 
{
    //asp.net textarea maxlength doesnt work; do it by hand
    var maxlength = 2000; //set your value here (or add a parm and pass it in)
    var object = document.getElementById(text.id)  //get your object
    if (object.value.length > maxlength) 
    {
        object.focus(); //set focus to prevent jumping
        object.value = text.value.substring(0, maxlength); //truncate the value
        object.scrollTop = object.scrollHeight; //scroll to the end to prevent jumping
        return false;
    }
    return true;
}

Llame así:

<asp:TextBox ID="foo" runat="server" Rows="3" TextMode="MultiLine" onKeyUp="javascript:Count(this);" onChange="javascript:Count(this);" ></asp:TextBox>

¿Por qué reinventar la rueda? ¿Cómo es esto mejor que usar el mecanismo integrado? (Respuesta de Alex Angas)
NickG

3
@NickG ¡Porque 'esta rueda' gira mejor que las versiones de madera de arriba! ;)
Fandango68

Prefiero esta solución de JavaScript. Lo anterior RegularExpressionValidatorpuede presentar un problema y requerir cambiar web.config. (Re: stackoverflow.com/questions/16660900/… )
user3454439

5

Las cosas han cambiado en HTML5:

ASPX:

<asp:TextBox ID="txtBox" runat="server" maxlength="2000" TextMode="MultiLine"></asp:TextBox>

C#:

if (!IsPostBack)
{
    txtBox.Attributes.Add("maxlength", txtBox.MaxLength.ToString());
}

HTML renderizado:

<textarea name="ctl00$DemoContentPlaceHolder$txtBox" id="txtBox" maxlength="2000"></textarea>

Los metadatos para Attributes:

Resumen: Obtiene la colección de atributos arbitrarios (solo para la representación) que no corresponden a las propiedades del control.

Devuelve: A System.Web.UI.AttributeCollectionde pares de nombre y valor.


Esa es una buena respuesta, pero debe eliminar la condición! IsPostBack porque TextBox no tendrá la propiedad maxlength si alguien la elimina en el DOM en Firebug, por ejemplo.
krlzlx

Buen punto, aunque en mi aplicación de uso interno limitado, esto fue suficiente.
Kristopher

4

Otra forma de arreglar esto para aquellos navegadores (Firefox, Chrome, Safari) que admiten maxlength en áreas de texto (HTML5) sin javascript es derivar una subclase de la clase System.Web.UI.WebControls.TextBox y anular el método Render. Luego, en el método anulado, agregue el atributo maxlength antes de renderizar como normal.

protected override void Render(HtmlTextWriter writer)
{
    if (this.TextMode == TextBoxMode.MultiLine
        && this.MaxLength > 0)
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString());
    }

    base.Render(writer);
}

1
También puede convertir esto en un ControlAdapter de esta manera no necesitaría reemplazar cada TextBox con el textbox heredado.
Peter

4

utilizar el atributo personalizado maxsize = "100"

<asp:TextBox ID="txtAddress" runat="server"  maxsize="100"
      Columns="17" Rows="4" TextMode="MultiLine"></asp:TextBox>
   <script>
       $("textarea[maxsize]").each(function () {
         $(this).attr('maxlength', $(this).attr('maxsize'));
         $(this).removeAttr('maxsize'); 
       });
   </script>

esto se renderizará así

<textarea name="ctl00$BodyContentPlac
eHolder$txtAddress" rows="4" cols="17" id="txtAddress" maxlength="100"></textarea>

No funciona en IE 9 o anterior, por lo que debería combinarse con un validador como en la respuesta de Alex Angas.
NickG

3
$('#txtInput').attr('maxLength', 100);

Tiene votos negativos porque no funciona. No tiene ningún efecto y aún puede escribir más de 100 caracteres. Eso hace que la respuesta sea inútil, de ahí todos los votos en contra.
NickG

2
+1 Puede que esto no haya funcionado en HTML 4.01 pero funciona en HTML 5 con la introducción del atributo 'maxlength' .
Charles Caldwell

3

Utilice HTML textarea con runat="server"para acceder a él en el lado del servidor. Esta solución tiene menos problemas que usar javascript o regex.

<textarea runat="server" id="txt1" maxlength="100" />

Nota: Para acceder a la Textpropiedad en el lado del servidor, debe usar en txt1.Valuelugar detxt1.Text


2

Probé diferentes enfoques, pero cada uno tenía algunos puntos débiles (es decir, con cortar y pegar o compatibilidad con el navegador). Esta es la solución que estoy usando en este momento:

function multilineTextBoxKeyUp(textBox, e, maxLength) {
    if (!checkSpecialKeys(e)) {
        var length = parseInt(maxLength);
        if (textBox.value.length > length) {
            textBox.value = textBox.value.substring(0, maxLength);
        }
    }
}

function multilineTextBoxKeyDown(textBox, e, maxLength) {
    var selectedText = document.selection.createRange().text;
    if (!checkSpecialKeys(e) && !e.ctrlKey && selectedText.length == 0) {
        var length = parseInt(maxLength);
        if (textBox.value.length > length - 1) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;
            }
        }
    }
}

function checkSpecialKeys(e) {
    if (e.keyCode != 8 && e.keyCode != 9 && e.keyCode != 33 && e.keyCode != 34 && e.keyCode != 35 && e.keyCode != 36 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40) {
        return false;
    } else {
        return true;
    }
}

En este caso, estoy llamando a multilineTextBoxKeyUp en key up y multilineTextBoxKeyDown en key down:

myTextBox.Attributes.Add("onkeyDown", "multilineTextBoxKeyDown(this, event, '" + maxLength + "');");
myTextBox.Attributes.Add("onkeyUp", "multilineTextBoxKeyUp(this, event, '" + maxLength + "');");

1

Eche un vistazo a esto . La única forma de resolverlo es mediante javascript, como lo intentaste.

EDITAR: intente cambiar el evento a pulsación de tecla.


1

Así es como lo hicimos (mantiene todo el código en un solo lugar):

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"/>
<% TextBox1.Attributes["maxlength"] = "1000"; %>

Por si acaso alguien todavía usa formularios web en 2018 ...


0

El siguiente ejemplo en JavaScript / Jquery hará eso-

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
     function count(text, event) {

         var keyCode = event.keyCode;

         //THIS IS FOR CONTROL KEY
         var ctrlDown = event.ctrlKey;

         var maxlength = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val().length;

         if (maxlength < 200) {
             event.returnValue = true;
         }
         else {

             if ((keyCode == 8) || (keyCode == 9) || (keyCode == 46) || (keyCode == 33) || (keyCode == 27) || (keyCode == 145) || (keyCode == 19) || (keyCode == 34) || (keyCode == 37) || (keyCode == 39) || (keyCode == 16) || (keyCode == 18) ||
                 (keyCode == 38) || (keyCode == 40) || (keyCode == 35) || (keyCode == 36) || (ctrlDown && keyCode == 88) || (ctrlDown && keyCode == 65) || (ctrlDown && keyCode == 67) || (ctrlDown && keyCode == 86)) 

                  {
                 event.returnValue = true;
                  }

             else {

                 event.returnValue = false;
             }
         }

     }

     function substr(text)
      {
          var txtWebAdd = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val();
          var substrWebAdd;
          if (txtWebAdd.length > 200) 
          {                 
              substrWebAdd = txtWebAdd.substring(0, 200);                                  
              $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val('');
              $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val(substrWebAdd); 

          }
     }                  


0

Este fragmento funcionó en mi caso. Estaba buscando la solución y pensé en escribir esto para que pueda ayudar a cualquier futuro lector.

ÁSPID

<asp:TextBox ID="tbName" runat="server" MaxLength="250" TextMode="MultiLine" onkeyUp="return CheckMaxCount(this,event,250);"></asp:TextBox>

Java Script

function CheckMaxCount(txtBox,e, maxLength)
{
    if(txtBox)
    {  
        if(txtBox.value.length > maxLength)
        {
            txtBox.value = txtBox.value.substring(0, maxLength);
        }
        if(!checkSpecialKeys(e))
        {
            return ( txtBox.value.length <= maxLength)
        }
    }
}

function checkSpecialKeys(e)
{
    if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40)
        return false;
    else
        return true;
}

@ Raúl Roa La respuesta me funcionó en caso de copiar / pegar. mientras esto lo hace.


0
$("textarea[maxlength]").on("keydown paste", function (evt) {
            if ($(this).val().length > $(this).prop("maxlength")) {
                if (evt.type == "paste") {
                    $(this).val($(this).val().substr(0, $(this).prop("maxlength")));
                } else {
                    if ([8, 37, 38, 39, 40, 46].indexOf(evt.keyCode) == -1) {
                        evt.returnValue = false;
                        evt.preventDefault();
                    }
                }
            }
        });

0

puede especificar la longitud máxima para el cuadro de texto de varias líneas en pageLoad Javascript Event

function pageLoad(){
                     $("[id$='txtInput']").attr("maxlength","10");
                    }

He establecido la propiedad de longitud máxima del cuadro de texto multilínea txtInput en 10 caracteres en la función pageLoad () Javascript


0

Esta es la misma que la respuesta de @ KeithK, pero con algunos detalles más. Primero, cree un nuevo control basado en TextBox.

using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyProject
{
    public class LimitedMultiLineTextBox : System.Web.UI.WebControls.TextBox
    {
        protected override void Render(HtmlTextWriter writer)
        {
            this.TextMode = TextBoxMode.MultiLine;

            if (this.MaxLength > 0)
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString());
            }

            base.Render(writer);
        }
    }
}  

Tenga en cuenta que el código anterior siempre establece el modo de texto en multilínea.

Para usar esto, debe registrarlo en la página aspx. Esto es necesario porque deberá hacer referencia a él mediante el TagPrefix; de lo contrario, la compilación se quejará de los controles genéricos personalizados.

<%@ Register Assembly="MyProject" Namespace="MyProject" TagPrefix="mp" %>

<mp:LimitedMultiLineTextBox runat="server" Rows="3" ...

0

Casi todos los navegadores modernos ahora admiten el uso del atributo maxlength para elementos textarea. (https://caniuse.com/#feat=maxlength)

Para incluir el atributo maxlength en un TextBox de varias líneas, simplemente puede modificar la colección de Atributos en el código subyacente así:

txtTextBox.Attributes["maxlength"] = "100";

Si no desea tener que usar el código subyacente para especificar eso, puede crear un control personalizado que se derive de TextBox:

public class Textarea : TextBox
{
    public override TextBoxMode TextMode
    {
        get { return TextBoxMode.MultiLine; }
        set { }
    }

    protected override void OnPreRender(EventArgs e)
    {
        if (TextMode == TextBoxMode.MultiLine && MaxLength != 0)
        {
            Attributes["maxlength"] = MaxLength.ToString();
        }

        base.OnPreRender(e);
    }
}

0

MaxLength ahora es compatible a partir de .NET 4.7.2, por lo que siempre que actualice su proyecto a .NET 4.7.2 o superior, funcionará automáticamente.

Puede ver esto en las notas de la versión aquí , específicamente:

Permita que los desarrolladores de ASP.NET especifiquen el atributo MaxLength para asp multilínea: TextBox. [449020, System.Web.dll, error]

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.