Wie man Schränkungsweite der Textbox sein gleiche wie MaxLength in ASP.NET
-
26-09-2019 - |
Frage
Gibt es eine Weise, die ich die Breite einer Textbox begrenzen kann gleich die MaxLength-Eigenschaft sein? In meinem Fall jetzt wird das Textbox-Steuerelement in einer Tabellenzelle angeordnet, 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 steuern), aber ist es eine Möglichkeit, die tatsächliche Breite auf die maximale Anzahl der Zeichen in der typisierten Box erlaubt zu beschränken?
Lösung
Es wird nicht genau sein, weil Zeichen in der Breite variieren können. Aber wenn Sie das wirklich ernst wäre, könnte man es mit ein wenig Javascript (jQuery) tun. Die Schritte wären:
- Erstellen Sie eine Spanne außerhalb des Bildschirms (oben: -1000px oder etwas)
- Stellen Sie sicher, dass die Spanne hat die gleichen Stile / Klassen als Textfeld
- Füllen Sie die Spanne mit 60 Zeichen
- Verwenden Sie jQuery die Breite der Spanne messen
- anwenden, die Breite auf das Textfeld
Es ist eine Technik ähnlich wie die Auto-Erweiterung Textbereiche sehen Sie 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.
Andere Tipps
Sie können es von Code festgelegt (genannt in Ihrem Page_Load) als solche:
txtTitle.Width = new Unit(txtTitle.MaxLength, UnitType.Em);
Unser System ist datenbankgesteuert und wir haben eine Metadatentabelle, dass speichert eine Länge Eigenschaft für jede Variable. Ich persönlich die Meta-Daten durch Iterieren über die Control und für jede TextBox Artikel, ziehen die Länge der Meta-Daten der Variablen verwendet und dann zu MaxLength zuweisen und Breite aber wenn Sie bereits MaxLength gesetzt haben, könnten Sie es Breiten in dies tun haben Art und Weise.
Ich verwende die HTML-Eigenschaft cols
So für Ihr Beispiel würde ich verwenden
<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 habe dies nie versucht, aber ich frage mich, ob es einen Weg gibt, sowohl zusammen zu binden. MaxLength auch Sätze zu cols, wäre eine interessante Übung so einstellen
Ich weiß, dass dies eine alte Frage, aber für diejenigen, die über sie kommen, um nach, wie man Stil Textfelder auf der Grundlage des MaxLength-Attribut ich folgende CSS verwenden:
input[maxlength='2'] { width: 40px;}
Wenn Sie viele Textfelder mit verschiedenen MaxLengths haben, dann ist wahrscheinlich das wird nicht die Lösung für Sie sein. Allerdings, wenn Sie die Präsentation eines Textfeld übereinstimmen sollen, was Eingang in sie sein, ich denke, es ist eine gute Lösung.
$(':input[maxlength]').each(function (i, e) {$(e).width(e.maxLength * 10)});
Das macht eine Annahme, dass Zeichen sind ungefähr 10px. Es funktioniert ganz gut für meine Bedürfnisse.
Ich weiß, dies ist eine sehr alte Post ist - hier ist meine Antwort für zukünftige Referenz für andere
Verwenden Sie die Style-Eigenschaft auf Schränkungsweite zu 100% statt der Breiten Eigenschaft auf seinem eigenen.
z.
<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 erprobt und auf in einer Produktionsumgebung I Arbeit getestet. Es ist einfacher als die Verwendung von Javascript und arbeitet in der bestehenden HTML.
Was genau, warum das funktioniert, leider bin ich kurz von Wissen.