Как установить ширину текстового поля, равную MaxLength в ASP.NET - PullRequest
Новая
       27

Как установить ширину текстового поля, равную MaxLength в ASP.NET

5 голосов
/ 11 июня 2010

Есть ли способ ограничить ширину текстового поля до свойства MaxLength? В моем случае прямо сейчас элемент управления textbox помещается в ячейку таблицы, как в следующем фрагменте: 

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

(я знаю, что я не должен использовать таблицы HTML для управления макетом ... другой предмет наверняка), но есть ли способ ограничить фактическую ширину максимально допустимым количеством символов в набираемом поле?

Ответы [ 6 ]

3 голосов
/ 31 августа 2011

Вы можете установить его из кода (который вызывается в вашей Page_Load) следующим образом: 

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

Наша система управляется базой данных, и у нас есть таблица метаданных, в которой хранится свойство длины для каждой переменной.Я лично использовал метаданные, перебирая ControlCollection и для каждого элемента TextBox, вытягивая длину метаданных переменной, а затем присваивая ее MaxLength и Width, хотя, если у вас уже установлен MaxLength, вы могли бы сделать это в этом Widthsобразом.

3 голосов
/ 11 июня 2010

Это не будет точным, потому что символы могут различаться по ширине.Но если вы действительно серьезно относитесь к этому, вы можете сделать это с небольшим количеством Javascript (jQuery).Шаги будут:

  • Создать диапазон за пределами экрана (верх: -1000px или что-то)
  • Убедитесь, что диапазон имеет те же стили / классы, что и текстовое поле
  • Заполните диапазон 60 символами
  • Используйте jQuery для измерения ширины диапазона
  • Примените эту ширину к текстовому полю

Это метод, аналогичныйавтоматически расширяющиеся текстовые области, которые вы видите на Facebook, и такие: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(В этом случае вы делаете это горизонтально, а не вертикально.)

Если вам нужен реальный код, позвольте мнезнаешь, я сделаю все возможное.

0 голосов
/ 02 марта 2016

Я понимаю, что это очень старая публикация - вот мой ответ для дальнейшего использования другими!

Используйте свойство Style, чтобы установить ширину в 100% вместо свойства width самостоятельно.

например 

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

Это опробовано и протестировано в производственной среде, в которой я работаю.Это проще, чем использование Javascript и работает в существующем HTML.

Что именно, почему это работает, к сожалению, мне не хватает знаний.

0 голосов
/ 12 февраля 2014 
$(':input[maxlength]').each(function (i, e) {$(e).width(e.maxLength * 10)});

Предполагается, что символы примерно 10 пикселей.Это работает довольно хорошо для моих нужд.

0 голосов
/ 17 октября 2013

Я понимаю, что это старый вопрос, но для тех, кто сталкивался с ним, ища, как оформить текстовые поля на основе атрибута MaxLength, я использую следующий CSS: 

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

Если у вас много текстовых полей с разными значениями MaxLengths, то это, вероятно, не будет решением для вас. Однако если вы хотите, чтобы представление текстового поля соответствовало тому, что должно быть введено в него, я думаю, что это хорошее решение.

0 голосов
/ 11 июня 2010

Я использую свойства HTML cols

Так что для вашего примера я бы использовал 

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

Я никогда не пробовал этого, но мне интересно, есть ли способ связать оба вместе. Поэтому установка MaxLength также на cols, было бы интересным упражнением

...