Come impostare la larghezza della casella di testo come MaxLength in ASP.NET

Question

Esiste un modo per limitare la larghezza di una casella di testo alla proprietà MaxLength? Nel mio caso in questo momento, il controllo TextBox è collocato in una cella di tabella come in questo frammento:

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

(so che non dovrei usare le tabelle HTML per controllare layout..another soggetto di sicuro), ma c'è un modo di limitare la larghezza effettiva al numero massimo di caratteri consentiti nella casella digitato?

Answer 1

Non sarà preciso, perché i caratteri possono variare in larghezza. Ma se tu fossi davvero serio su questo, potresti farlo con un po 'di Javascript (jQuery). I passi sarebbero:

• Creare un arco di fuori campo (in alto: -1000px o qualcosa)
• Assicurarsi che la campata ha gli stessi stili/classi come la tua casella di testo
• Riempire l'arco con 60 caratteri
• utilizzare jQuery per misurare la larghezza della campata
• Applicare che la larghezza della casella di testo

Si tratta di una tecnica simile a quella di auto-espansione textarea y ou vedere su Facebook e simili: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(In questo caso, si sta facendo orizzontale anziché in verticale.)

Se è necessario il codice vero e proprio, me lo faccia sapere, farò del mio meglio.

Answer 2

Io uso i colli di proprietà HTML

Così, per il tuo esempio userei

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

---

Non ho mai provato questo, ma mi chiedo se c'è un modo per legare e due insieme. Quindi impostare MaxLength imposta anche i cols, sarebbe un esercizio interessante

Answer 3

è possibile impostare da codice (chiamato nel vostro Page_Load) in quanto tale:

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

Il nostro sistema è basato su database e abbiamo una tabella dei meta-dati che memorizza una proprietà di lunghezza per ogni variabile. Personalmente ho utilizzato i metadati eseguendo un'iterazione su ControlCollection e per ciascun elemento TextBox, estrapolando la lunghezza dei metadati della variabile e assegnandola a MaxLength e Width sebbene, se si dispone già di MaxLength set, si potrebbe fare Widths in questo maniera.

Answer 4

mi rendo conto che questa è una domanda vecchia, ma per quelle persone che arrivano attraverso di esso cercando il modo per lo stile caselle di testo in base al MaxLength attribuisco io uso il seguente CSS:

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

Se hai un sacco di caselle di testo con MaxLengths diversi, quindi questa probabilmente non sarà la soluzione per te. Tuttavia, se vuoi che la presentazione di una casella di testo corrisponda a ciò che deve essere inserito in essa, penso che sia una buona soluzione.

Answer 5

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

Questo sta facendo un presupposto che i personaggi sono circa 10px. Funziona abbastanza bene per i miei bisogni.

Answer 6

Mi rendo conto che questo è un post molto vecchio - ecco la mia risposta per riferimento futuro per gli altri!

Utilizzare la proprietà Style per impostare la larghezza su 100% anziché sulla proprietà width.

ad es.

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

Questo è provato e testato in un ambiente di produzione su cui lavoro. È più semplice dell'uso di Javascript e funziona nell'HTML esistente.

Per quanto riguarda esattamente il motivo per cui funziona, sfortunatamente sono a corto di conoscenza.