Comment définir la largeur de la zone de texte pour être identique à MaxLength dans ASP.NET

Question

Existe-t-il un moyen de limiter la largeur d'une zone de texte pour être égale à la propriété MaxLength? Dans mon cas, en ce moment, le contrôle de zone de texte est placé dans une cellule de tableau comme dans cet extrait:

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

(je sais que je ne devrais pas utiliser des tableaux HTML pour contrôler layout..another sujet sûr), mais est-il façon de contraindre la largeur réelle au nombre maximum de caractères autorisés dans la boîte tapée?

Answer 1

Ce ne sera pas précis, car les caractères peuvent varier en largeur. Mais si vous étiez vraiment sérieux à ce sujet, vous pourriez le faire avec un peu de Javascript (jQuery). Les étapes seraient:

• Créer une période hors-champ (en haut: -1000px ou quelque chose)
• Assurez-vous que la durée a les mêmes styles/classes que votre zone de texte
• Remplir la durée avec 60 caractères
• Utilisez jQuery pour mesurer la largeur de la travée
• Appliquer cette largeur à la zone de texte

C'est une technique similaire à la textareas auto-expand y ous voir sur Facebook et tel: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(Dans ce cas, vous le faites horizontalement plutôt que verticalement.)

Si vous avez besoin du code réel, laissez-moi savoir, je ferai de mon mieux.

Answer 2

J'utilise le Col. de propriété HTML

Donc, pour votre exemple, je voudrais utiliser

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

---

Je ne l'ai jamais essayé, mais je me demande s'il y a un moyen de lier les deux ensemble. Donc, la définition de MaxLength est également un exercice intéressant.

Answer 3

Vous pouvez le définir à partir du code (appelé dans votre Page_Load) en tant que tel:

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

Notre système est par base de données et nous avons une table de méta-données qui stocke une propriété de longueur pour chaque variable. Personnellement, j'ai utilisé les méta-données en itérant sur ControlCollection et pour chaque élément TextBox, en tirant la longueur des méta-données de la variable et en l'assignant à MaxLength et à Width mais si vous avez déjà MaxLength, vous pouvez le faire. manière.

Answer 4

Je me rends compte que c'est une vieille question, mais pour les gens qui viennent à travers elle cherche comment le style des zones de texte basé sur l'MaxLength attribue j'utilise le CSS suivant:

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

Si vous avez beaucoup des zones de texte avec différents MaxLengths, alors cela ne va probablement pas être la solution pour vous. Cependant, si vous voulez que la présentation d'une zone de texte corresponde à ce qui doit être saisi, je pense que c'est une bonne solution.

Answer 5

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

Ce fait une hypothèse que les personnages sont à peu près 10px. Cela fonctionne assez bien pour mes besoins.

Answer 6

Je me rends compte que c'est un très vieux post - voici ma réponse pour référence future pour les autres! Utilisez la propriété Style pour définir la largeur sur 100% au lieu de la propriété width seule.

par exemple.

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

Ceci est essayé et testé dans un environnement de production sur lequel je travaille. C'est plus simple que d'utiliser Javascript et fonctionne dans le HTML existant.

Quant à savoir exactement pourquoi cela fonctionne, malheureusement, je suis à court de connaissances.