Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Vùng nhập liệu » Chú thích cho khung nhập liệu
URL: https://www.javascriptbank.com/accessible-compact-forms.html
Với đoạn mã JavaScript này, bạn sẽ dễ dàng tạo chú thích cho các khung nhập liệu trên trang web của mình; chú thích sẽ hiện ngay bên trong khung và sẽ mất đi người khung được focus.Hiệu ứng sẽ hoạt động tốt cho dù trình duyệt có tắt JavaScript và CSS.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Vùng nhập liệu » Chú thích cho khung nhập liệu
URL: https://www.javascriptbank.com/accessible-compact-forms.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}/*Created by: Mike Brittain Web Site: http://www.mikebrittain.com/*/FORM#login { position: relative;}DIV#username, DIV#password { position: relative; float: left; margin-right: 3px;}INPUT#username-field, INPUT#password-field { width: 10em;}LABEL.overlabel { position: absolute; top: 3px; left: 5px; z-index: 1; color: #999;}</style><script language="javascript">function initOverLabels () { if (!document.getElementById) return; var labels, id, field; // Set focus and blur handlers to hide and show // LABELs with 'overlabel' class names. labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { if (labels[i].className == 'overlabel') { // Skip labels that do not have a named association // with another field. id = labels[i].htmlFor || labels[i].getAttribute ('for'); if (!id || !(field = document.getElementById(id))) { continue; } // Hide any fields having an initial value. if (field.value !== '') { hideLabel(field.getAttribute('id'), true); } // Set handlers to show and hide labels. field.onfocus = function () { hideLabel(this.getAttribute('id'), true); }; field.onblur = function () { if (this.value === '') { hideLabel(this.getAttribute('id'), false); } }; // Handle clicks to LABEL elements (for Safari). labels[i].onclick = function () { var id, field; id = this.getAttribute('for'); if (id && (field = document.getElementById(id))) { field.focus(); } }; } }};function hideLabel (field_id, hide) { var field_for; var labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { field_for = labels[i].htmlFor || labels[i]. getAttribute('for'); if (field_for == field_id) { labels[i].style.textIndent = (hide) ? '-1000px' : '0px'; return true; } }}// Created by: Simon Willison// http://simon.incutio.com/archive/2004/05/26/addLoadEventfunction addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { setTimeout(initOverLabels, 50);});</script><form name="login" action="#" method="post" style="text-align: center; width: 50%;"> <div id="username"> <label for="username-field" class="overlabel"> Username</label> <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1"> </div> <div id="password"> <label for="password-field" class="overlabel"> Password</label> <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2"> </div> <div id="submit"> <input type="submit" name="submit" value="Login" tabindex="3"> </div></form>