让所有的浏览器都支持 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', '');
				});
			}
		}
	});
});

 

View Demo »

 

以上MooTools-Placeholder插件代码解决方案与《表单的文本字段默认值插件,基于MooTools》类似。有兴趣的可以去看一看。

站点统计