让所有的浏览器都支持 HTML5 placeholder 属性,基于MooTools
随着HTML5发布,我们已经看到了HTML5会给Web开发标准带来最巨大的飞跃。如果您想了解更多关于HTML5和CSS3的知识,请看一下来自淘宝的空雁写的《揭秘HTML5和CSS3》会有您想要的东西。
我们今天是对HTML5中input和textarea所新增的placeholder属性进行讨论,placeholder属性的作用相当于输入框的输入提示。
我大概体验了一下此属性,目前只有Google Chrome 浏览器支持,其它的所有主流浏览器都不支持。
The HTML5 Code :
1 2 3 4 5 6 7 | <dl> <dt>Simple searchbox:</dt> <dd><input name="search" placeholder="Search" /></dd> <dt>Subscribe:</dt> <dd><input name="email" placeholder="Enter your email here" /></dd> <dt>etc.</dt> </dl> |
不过,MooTools-Placeholder插件可以让所有的浏览器都支持HTML5 的 placeholder属性 。
MooTools-Placeholder: This simple plugin provides HTML 5 placeholder attribute to all browsers.
The MooTools JavaScript :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | $(window).addEvent('domready', function() { if ('placeholder' in document.createElement('input')) return; var color = '#aaa'; $$('input').each(function(el) { var text = el.get('placeholder'), defaultColor = el.getStyle('color'); if (text) { el .setStyle('color', color) .set('value', text) .addEvent('focus', function() { if (el.value == '' || el.value == text) { el .setStyle('color', defaultColor) .set('value', ''); } }) .addEvent('blur', function() { if (el.value == '' || el.value == text) { el .setStyle('color', color) .set('value', text); } }); var form = el.getParent('form'); if (form) { form.addEvent('submit', function() { if (el.value == text) el.set('value', ''); }); } } }); }); |
以上MooTools-Placeholder插件代码解决方案与《表单的文本字段默认值插件,基于MooTools》类似。有兴趣的可以去看一看。
用IE9都看不到效果啊,在chrome下很赞!
不好意思,你说的BUG我已经修复了。
还是习惯于用jquery的插件搞定这些IE兼容问题