Tôi có thể chỉ định maxlength trong css không?

85

Tôi có thể thay thế thuộc tính maxlength bằng thuộc tính nào đó trong CSS không?

<input type='text' id="phone_extension" maxlength="4" />

html css

— Brian Ramsay
nguồn

69

Không. Điều này cần được thực hiện trong HTML. Bạn có thể đặt giá trị bằng Javascript nếu cần.

— edeverett
nguồn

126

Không.

maxlength dành cho hành vi.

CSS là để tạo kiểu.

Đó là lý do tại sao.

Ngoài ra, CSS có thể được áp dụng globaly tới bất kỳ thẻ, vì vậy nó sẽ không làm cho tinh thần để có một tài sản maxlength áp dụng cho một div hoặc img, vv

— Dan Diplo

5

Nhưng điều gì sẽ xảy ra nếu bạn muốn áp dụng thuộc tính maxlength cho một tập hợp các loại đầu vào chung (ví dụ: tên, thành phố, tiểu bang) và bạn có thể có nhiều trường hợp của các đầu vào đó ở nhiều nơi khác nhau thông qua trang web. Sẽ thật tuyệt nếu có thể xác định một lớp (ví dụ: 'FirstName') và họ áp dụng lớp đó cho tất cả Đầu vào tên đầu tiên <Input class = "FirstName">

— Catchops

@Catchops Đó là một hạn chế của HTML và việc sử dụng CSS để giải quyết vấn đề này sẽ là một vụ hack xấu xí. Đó là lý do tại sao hầu hết các khuôn khổ web đều cung cấp hệ thống mẫu với các thành phần tùy chỉnh.

— Gabriel

12

Bạn có thể sử dụng jQuery như:

$("input").attr("maxlength", 4)

Đây là bản demo: http://jsfiddle.net/TmsXG/13/

— macio.Jun
nguồn

6

Tôi không nghĩ rằng bạn có thể làm được, và CSS được cho là mô tả cách trang trông không giống như những gì nó làm, vì vậy ngay cả khi bạn có thể, nó không thực sự là cách bạn nên sử dụng nó.

Có lẽ bạn nên nghĩ đến việc sử dụng JQuery để áp dụng chức năng chung cho các thành phần biểu mẫu của mình?

— Charlie
nguồn

4

Không phải với CSS, không.

— JMP
nguồn

3

Không phải với CSS, nhưng bạn có thể mô phỏng và mở rộng / tùy chỉnh hành vi mong muốn với JavaScript.

— code_burgar
nguồn

2

Như những người khác đã trả lời, hiện tại không có cách nào để thêm maxlength trực tiếp vào một lớp CSS.

Tuy nhiên, giải pháp sáng tạo này có thể đạt được những gì bạn đang tìm kiếm.

Tôi có jQuery trong một tệp có tên maxLengths.js mà tôi tham chiếu trong trang web (site.master cho ASP)

chạy đoạn mã để xem nó hoạt động, hoạt động tốt.

jquery, css, html:

$(function () {
    $(".maxLenAddress1").keypress(function (event) {

        if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
            return false;
        } else {
            return true;
        }

    });
});

.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" class="maxLenAddress1" />

Mở rộng đoạn mã

Lợi thế của việc sử dụng trường này: nếu nó được quyết định thì độ dài tối đa cho loại trường này cần phải được đẩy ra hoặc trong toàn bộ ứng dụng của bạn, bạn có thể thay đổi nó tại một chỗ. Có ích cho độ dài trường cho những thứ như mã khách hàng, trường tên đầy đủ, trường email, bất kỳ trường nào phổ biến trong ứng dụng của bạn.

— Taylor Brown
nguồn

1

Mã này rất dễ sao chép và dán cho nhiều loại trường. Tôi giữ một tệp jQuery riêng biệt có tên "maxLengths.js" và đưa tệp đó vào trang chủ của tôi. Hãy thử nó ra, nó là rất thuận tiện!

— Taylor Brown

Chỉ vì bạn sử dụng một lớp HTML mà nó không phải là CSS.

— nyuszika7h

@ nyuszika7h cảm ơn vì bạn đã đánh giá cao đầu vào câu trả lời của tôi. tôi sẽ tranh luận trong khi tôi không áp dụng bất kỳ kiểu nào cho phần tử, tôi vẫn đang sử dụng biểu định kiểu xếp tầng trong giải pháp của mình, do đó CSS đang được sử dụng. Ngoài ra, tôi đã cập nhật câu trả lời của mình để phản ánh quan sát của bạn.

— Taylor Brown

1

Sử dụng $("input").attr("maxlength", 4) nếu bạn đang sử dụng phiên bản jQuery <1.6 và $("input").prop("maxLength", 4) nếu bạn đang sử dụng phiên bản jQuery 1.6+.

— Rohit
nguồn