Modernizr下载地址:http://modernizr.com/download/
一.使用Modernizr前提条件:
1.添加引用: css样式:
.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;} .no-boxshadow #MyContainer { border: 2px solid black;} 如果浏览器不支持box-shadow属性则调用下面的样式 三.使用Modernizr 验证 HTML5 必需的表单字段
添加div代码:
search:
JS代码:
window.onload = function() { // 获取表单input标签元素 var form = document.forms[0], inputs = form.elements; if (!Modernizr.input.autofocus) { //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 inputs[0].focus(); } if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('以下字段是必须的: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } }
下载本文