Cách đặt độ rộng của hộp văn bản giống với MaxLength trong ASP.NET

Question

Có cách nào tôi có thể giới hạn độ rộng của hộp văn bản bằng với thuộc tính MaxLength không? Trong trường hợp của tôi ngay bây giờ, điều khiển hộp văn bản được đặt trong một ô trong bảng như trong đoạn này:

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

(Tôi biết tôi không nên sử dụng bảng HTML để kiểm soát layout..another chủ đề cho chắc chắn) nhưng là có một cách để hạn chế chiều rộng thực tế cho số ký tự tối đa được phép trong hộp đã nhập?

Answer 1

Nó sẽ không chính xác, bởi vì các ký tự có thể khác nhau về chiều rộng. Nhưng nếu bạn thực sự nghiêm túc về điều này, bạn có thể làm điều đó với một chút Javascript (jQuery). Các bước sẽ là:

• Tạo một khoảng offscreen (top: -1000px hoặc một cái gì đó)
• Hãy chắc chắn rằng nhịp có phong cách tương tự/classes như hộp văn bản của bạn
• Điền nhịp với 60 ký tự
• Sử dụng jQuery để đo chiều rộng của nhịp
• Áp dụng chiều rộng mà để vào hộp văn bản

đó là một kỹ thuật tương tự như tính năng tự động mở rộng textareas y ou thấy trên Facebook và ví dụ: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(Trong trường hợp này, bạn đang làm nó theo chiều ngang thay vì theo chiều dọc.)

Nếu bạn cần mã thực, cho tôi biết, tôi sẽ làm hết sức mình.

Answer 2

tôi sử dụng cols sở hữu HTML

Vì vậy, ví dụ của bạn tôi sẽ sử dụng

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

---

Tôi chưa bao giờ cố gắng này, nhưng tôi tự hỏi, nếu có một cách để buộc cả hai cùng lúc. Vì vậy, thiết lập MaxLength cũng đặt thành cols, sẽ là một bài tập thú vị

Answer 3

Bạn có thể thiết lập nó từ mã (được gọi trong Page_Load của bạn) như vậy:

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

hệ thống của chúng tôi là cơ sở dữ liệu điều khiển và chúng tôi có một bảng dữ liệu meta mà các cửa hàng một thuộc tính length cho mỗi biến. Cá nhân tôi đã sử dụng siêu dữ liệu bằng cách lặp qua ControlCollection và cho mỗi mục TextBox, kéo chiều dài của dữ liệu meta của biến và sau đó gán nó cho MaxLength và Width mặc dù nếu bạn đã có MaxLength, bạn có thể làm nó Width cách thức.

Answer 4

tôi nhận ra rằng đây là một câu hỏi cũ, nhưng đối với những người đi qua nó tìm cách tạo kiểu hộp văn bản dựa trên maxlength thuộc tính tôi sử dụng CSS sau đây:

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

Nếu bạn có rất nhiều các hộp văn bản với các MaxLength khác nhau, thì điều này có lẽ không phải là giải pháp cho bạn. Tuy nhiên nếu bạn muốn trình bày của một hộp văn bản để phù hợp với những gì được nhập vào nó, tôi nghĩ rằng đó là một giải pháp tốt.

Answer 5

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

này được đưa ra một giả định rằng nhân vật khoảng 10px. Nó hoạt động khá tốt cho nhu cầu của tôi.

Answer 6

Tôi nhận thấy đây là một bài đăng rất cũ - đây là câu trả lời của tôi để tham khảo trong tương lai cho người khác!

Sử dụng thuộc tính Kiểu để đặt chiều rộng thành 100% thay vì độ rộng của thuộc tính.

ví dụ:

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

Điều này được thử và thử nghiệm trong môi trường sản xuất mà tôi làm việc. Nó đơn giản hơn việc sử dụng Javascript và hoạt động trong HTML hiện có.

Để biết chính xác lý do tại sao tính năng này hoạt động, rất tiếc, tôi thiếu kiến ​​thức.