表单的文本字段默认值插件,基于MooTools

在我们的留言,登录和查询模块中,我们很喜欢给表单的文本字段(input) 加上默认输入值,这一微妙的改进,是非常有利于用户体验的,当我们点击进入该字段域时,默认输入值就给人一种消失的感觉,当你离开该域的时候该字段为空,再点击别的域的时候,该域又恢复了默认输入值。其实这是一件很容易的事,我们通过一个MooTools class来实现此效果。

演示:Demo

原始的解决方法

原始的解决方法是在input 和 textarea的 onfocus,onblur属性里内联入javascript脚本。单个文本字段(input) 或文本区域(textarea)是有一定的实用性的,多个的时候出现的问题就多了(代码利用率不高,维护成本增加)。

1
2
3
<input type="text"  value="Search here..."  
       onfocus="if(value=='Search here...'){value =''}" 
       onblur="if (value==''){value='Search here...'}"/>

好的解决方案(MooTools类版)

The Css

1
2
3
4
5
textarea, input[type='text'], input[type='password'], select { border: 1px solid #ccc; background: #fff; }
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #aaa; }
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #888; outline: 2px solid #ffffaa; }
input{ cursor: pointer; }
input[type='text'],input[type='password'] { cursor: text; }

The XHTML

1
2
3
<input type="text" class="defs" rel="Search here..." />
<input type="text" class="defs" rel="Email address" />
<input type="text" class="defs" rel="Like whoa!" />

每个字段的默认值将放置在rel属性中。

The MooTools class 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
var dwDefaults = new Class({
	//implements
	Implements: [Options],
 
	//options
	options: {
		collection: $$('input[type=text]')
	},
 
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.defaults();
	},
 
	//a method that does whatever you want
	defaults: function() {
		this.options.collection.each(function(el) {
			el.set('value',el.get('rel'));
			el.addEvent('focus', function() { if(el.get('value') == el.get('rel')) { el.set('value',''); } });
			el.addEvent('blur', function() { if(el.get('value') == '') { el.set('value',el.get('rel')); } });
		});
	}
 
});

对于集合中的每一个项目,我们都添加的focusblur 事件,控制该项目的消息是否应该被删除或显示。

The MooTools Javascript Usage

1
2
3
4
5
window.addEvent('domready', function() {
	var defs = new dwDefaults({
		collection: $$('input.defs')
	}); 
});

搜集所有要加默认值的文本字段,然后执行动作。

好的解决方案(MooTools方法版 )

The MooTools JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
var dwDefaults=function (s){
	s.each(function(el){
		el.set('value',el.get('rel'));
		el.addEvent('focus', function() { 
			if(el.get('value') == el.get('rel')) { el.set('value',''); } 
		});
		el.addEvent('blur', function() { 
			if(el.get('value') == '') { el.set('value',el.get('rel')); } 
		});			
 
   });
}

用一个方法,来实现。

The MooTools Javascript Usage

1
2
3
window.addEvent('domready', function() {
	dwDefaults($$('input.defs'));
});

执行方法。

站点统计