Wie wird die Breite des Textfelds auf MaxLength in ASP.NET festgelegt?

Question

Gibt es eine Möglichkeit, die Breite eines Textfelds auf die MaxLength-Eigenschaft zu begrenzen? In meinem Fall jetzt wird das Textbox-Steuerelement in einer Tabellenzelle, wie in diesem Snippet:

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

(ich weiß, dass ich nicht HTML-Tabellen verwenden, sollte layout..another Thema sicher zu kontrollieren) aber gibt es ein Möglichkeit, die tatsächliche Breite auf die maximal zulässige Anzahl von Zeichen in der eingegebenen Box einzuschränken?

Answer 1

Es wird nicht präzise sein, weil Zeichen in der Breite variieren können. Aber wenn Sie das wirklich ernst meinen, könnten Sie es mit ein wenig Javascript (jQuery) machen. Die Schritte wären:

• eine Spannweite erstellen Offscreen (oben: -1000px oder etwas)
• die Spanne Stellen Sie sicher, die gleichen Stile/Klassen als Textfeld
• Füllen Sie die Spanne mit 60 Zeichen hat
• Verwenden jQuery die Breite der Spanne
• anwenden, die Breite in das Textfeld

Es ist eine Technik ähnlich dem auto-Erweiterung Textareas y zu messen siehe ou auf Facebook und so: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(In diesem Fall Sie tun es horizontal statt vertikal.)

Wenn Sie echten Code benötigen, lassen Sie mich wissen, ich werde mein Bestes tun.

Answer 2

ich die HTML-Eigenschaft cols

So für Ihr Beispiel würde ich

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

---

ich nie versucht haben, verwenden, aber ich frage mich, ob es eine Möglichkeit, beide zusammen zu binden. So Einstellung MaxLength auch auf Spalten setzt, wäre eine interessante Übung

Answer 3

Sie könnten es von Code festgelegt (in Ihrem Page_Load genannt) als solche:

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

Unser System Datenbank angetrieben ist, und wir haben eine Meta-Datentabelle, die eine Länge Eigenschaft für jede Variable speichert. Ich persönlich benutze die Metadaten, indem ich über die ControlCollection und für jedes TextBox-Element iteriere, die Länge der Metadaten der Variablen ziehe und sie dann MaxLength und Width zuweise, wenn MaxLength bereits gesetzt ist, könnte es Widths geben Weise.

Answer 4

Mir ist klar, dass dies eine alte Frage, aber für diejenigen, die über sie kommen, um nach wie Textfelder auf der MaxLength basierend auf Stil-Attribut ich folgende CSS:

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

Wenn Sie viele haben von Textfeldern mit verschiedenen MaxLengths, dann wird dies wahrscheinlich nicht die Lösung für Sie sein. Wenn Sie jedoch möchten, dass die Darstellung eines Textfelds dem entspricht, was in das Textfeld eingegeben werden soll, ist dies eine gute Lösung.

Answer 5

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

Dies macht eine Annahme, die Zeichen grob 10px sind. Es funktioniert ganz gut für meine Bedürfnisse.

Answer 6

Ich weiß, das ist ein sehr alter Beitrag - hier ist meine Antwort für zukünftige Referenz für andere!

Verwenden Sie die Style-Eigenschaft, um die Breite auf 100% anstelle der Eigenschaft width zu setzen.

z.B.

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

Dies ist in einer Produktionsumgebung, in der ich arbeite, erprobt und getestet. Es ist einfacher als die Verwendung von Javascript und funktioniert im vorhandenen HTML.

Um genau zu sein, warum das funktioniert, bin ich leider nicht wissen.