Cómo establecer el ancho del cuadro de texto para que sea igual que MaxLength en ASP.NET

Question

¿Hay alguna manera de limitar el ancho de un cuadro de texto para que sea igual a la propiedad MaxLength? En mi caso en este momento, el control de cuadro de texto se coloca en una celda de la tabla como en este fragmento:

<td class=TDSmallerBold style="width:90%"> 
     <asp:textbox id="txtTitle" runat="server" 
      CausesValidation="true" 
      Text="Type a title here..be concise but descriptive. Include price." 
      ToolTip="Describe the item with a short pithy title (most important keywords first). Include the price. The title you provide here will be the primary text found by search engines that index Zipeee content." 
      MaxLength="60" 
      Width="100%"> 
     </asp:textbox> 

(Sé que no debería usar tablas HTML para controlar layout..another sujeta a ciencia cierta), pero hay una forma de restringir el ancho real al número máximo de caracteres permitidos en el cuadro escrito?

Answer 1

No será preciso, ya que los caracteres pueden variar en ancho. Pero si fueras realmente serio acerca de esto, podrías hacerlo con un poco de Javascript (jQuery). Los pasos serían:

• Crear un lapso fuera de la pantalla (arriba: -1000px o algo así)
• Asegúrese de que el lapso tiene los mismos estilos/clases como el cuadro de texto
• Rellene el lapso de 60 caracteres
• uso jQuery para medir la anchura del tramo
• Aplicar que el ancho de la caja de texto

es una técnica similar a la áreas de texto que se expande automáticamente y ou ver en Facebook y tales: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(En este caso, se están haciendo horizontalmente en lugar de verticalmente.)

Si necesita código real, que me haga saber, haré lo mejor que pueda.

Answer 2

Puedo usar el HTML cols propiedad

Así, por tu ejemplo me gustaría utilizar

 <td class=TDSmallerBold style="width:90%"> 
    <asp:textbox id="txtTitle" runat="server" 
     CausesValidation="true" 
     Text="Type a title here..be concise but descriptive. Include price." 
     ToolTip="Blah Blah I don't like horizotal scroll-bars" 
     MaxLength="60" 
     Width="100%" 
     Cols="60" 
     > 
    </asp:textbox> 

---

que nunca he probado esto, pero me pregunto si hay una manera de atar los dos juntos. Por lo tanto, establecer MaxLength también se establece en cols, sería un ejercicio interesante

Answer 3

puede establecer desde el código (llamado en su Load), tales como:

txtTitle.Width = new Unit(txtTitle.MaxLength, UnitType.Em); 

Nuestro sistema es conducido base de datos y tenemos una tabla de metadatos que almacena una propiedad de longitud para cada variable. Personalmente, utilicé los metadatos iterando sobre la colección ControlCollection y para cada elemento de TextBox, tirando de la longitud de los metadatos de la variable y luego asignándola a MaxLength y Ancho, aunque si ya tienes MaxLength configurado, podrías tenerlo en Anchos en este manera.

Answer 4

que dan cuenta de que esto es una cuestión de edad, pero para aquellas personas que vienen a través de ella en busca de cómo el estilo cuadros de texto basados ​​en la MaxLength atribuyo yo uso el siguiente CSS:

input[maxlength='2'] { width: 40px;} 

Si usted tiene un montón de cuadros de texto con diferentes MaxLengths, entonces probablemente esta no sea la solución para ti. Sin embargo, si desea que la presentación de un cuadro de texto coincida con lo que se va a ingresar, creo que es una buena solución.

Answer 5

$(':input[maxlength]').each(function (i, e) {$(e).width(e.maxLength * 10)}); 

Se trata de hacer una suposición de que los personajes son más o menos 10px. Funciona bastante bien para mis necesidades.

Answer 6

Me doy cuenta de que esta es una publicación muy antigua: ¡esta es mi respuesta para futuras referencias para los demás!

Utilice la propiedad Style para establecer el ancho en 100% en lugar de la propiedad de ancho por sí solo.

p. Ej.

<td class=TDSmallerBold style="width:90%"> 
<asp:textbox id="txtTitle" runat="server" 
    CausesValidation="true" 
    Text="Type a title here..be concise but descriptive. Include price." 
    ToolTip="Blah Blah I don't like horizontal scroll-bars" 
    MaxLength="60" 
    Style="Width: 100%" 
    > 
</asp:textbox> 

Esto se ha probado en un entorno de producción en el que trabajo. Es más simple que usar Javascript y funciona en el HTML existente.

En cuanto a exactamente por qué esto funciona, lamentablemente me falta conocimiento.