Nhìn vào thuộc tính giữ chỗ HTML5
Một trong những phần mới yêu thích của tôi trong HTML5 là khả năng thêm Văn bản giữ chỗ dễ dàng Văn bản giữ chỗ là văn bản màu xám mà bạn tìm thấy trong trường đầu vào được sử dụng để đưa ra gợi ý cho người dùng về những gì đầu vào được mong đợi trong trường đó. Khi người dùng bắt đầu nhập vào đầu vào trường, văn bản này sẽ biến mất.
Ngày xưa, chúng ta thường làm điều này với JavaScript, như sau;
Không có gì sai với thực tiễn này, nhưng nó dễ dàng hơn trên HTML5.
HTML5 đã giới thiệu một thuộc tính mới với tên logic; giữ chỗ. Đây là một ví dụ:
Nếu chúng ta xem nó trên các trình duyệt, thì đầu vào bây giờ sẽ có văn bản màu xám, như được thấy dưới đây;
Một vài điều cần lưu ý: theo đặc điểm kỹ thuật, giữ chỗ thuộc tính không nên được sử dụng như là một thay thế cho một nhãn và nó cũng được đề xuất rằng thuộc tính này chỉ nên được áp dụng cho đầu vào loại yêu cầu văn bản, ví dụ:. bản văn, mật khẩu, Tìm kiếm, e-mail, văn bản và điện thoại.
Thêm giữ chỗ để đầu vào các loại: radio và hộp kiểm sẽ không làm cho bất kỳ sự khác biệt.
Giữ chỗ & CSS
Hơn nữa, việc tạo kiểu văn bản giữ chỗ thông qua CSS cũng có thể, nhưng tại thời điểm viết bài này vẫn chỉ giới hạn ở các trình duyệt Firefox và Webkit.
Ví dụ sau đây cho thấy cách chúng tôi thay đổi văn bản giữ chỗ thành màu xanh lá cây cả trong Webkit và Firefox;
đầu vào :: - webkit-input-placeholder màu: xanh; đầu vào: -moz-giữ chỗ màu: xanh;
Chỉ cần nhớ rằng, :: - webkit-input-placeholder và : -Moz-giữ chỗ sẽ chỉ ảnh hưởng đến văn bản và không thể được viết song song.
đầu vào :: - webkit-input-placeholder, đầu vào: -moz-placeholder color: green;
Đoạn mã này sẽ không hoạt động.
Bộ chọn thuộc tính
CSS3 cũng đến để hỗ trợ thuộc tính này bằng cách giới thiệu [giữ chỗ] bộ chọn thuộc tính;
đầu vào [giữ chỗ] viền: 1px màu xanh lá cây;
Trong ví dụ trên, chúng tôi chọn mọi đầu vào có giữ chỗ thuộc tính và thay đổi đường viền thành màu xanh lá cây.
tính tương thích của trình duyệt web
Tính năng HTML5 mới này không gây ngạc nhiên khi không được hỗ trợ trong các trình duyệt cũ và hiện chỉ được hỗ trợ đầy đủ trong: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 và Internet Explorer 10 (chưa được phát hành chính thức).
Phần mềm giữ chỗ
Tuy nhiên, nếu chúng ta cần hiển thị trình giữ chỗ trong các trình duyệt cũ hơn nhưng vẫn có thể sử dụng giữ chỗ thuộc tính, chúng ta có thể sử dụng Polyfills. Ở đây co rât nhiêu Phần mềm giữ chỗ ngoài kia nhưng trong ví dụ này, chúng ta sẽ sử dụng PlaceMe.js;
PlaceMe.js, như bạn có thể thấy từ đoạn mã trên, phụ thuộc vào jQuery. Bây giờ, nếu chúng ta xem nó, ví dụ, Internet Explorer 9, tất cả các đầu vào bây giờ sẽ hiển thị văn bản giữ chỗ.
- Xem bản demo
- Tải xuống nguồn
Suy nghĩ cuối cùng
Các Trình giữ chỗ HTML5 thuộc tính chắc chắn làm cho việc thêm văn bản giữ chỗ dễ dàng hơn. Bây giờ, tùy thuộc vào chúng tôi, các nhà phát triển và thiết kế web, chọn phương thức nào sẽ sử dụng: JavaScript hoặc HTML5.
Nếu bạn cho rằng việc sử dụng Polyfills và jQuery để hỗ trợ các trình duyệt cũ là không cần thiết, thì JavaScript rõ ràng phù hợp hơn cho công việc. Nhưng nếu bạn có thể yên tâm bỏ qua các trình duyệt cũ thì sử dụng Trình giữ chỗ HTML5 có lẽ là cách tốt hơn.
