CSSrainbow.cn

Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞.

Tutorials \ MooTools

文本字段/文本区域的默认值自动显示和隐藏 »

Posted on: in MooTools By:
Rainbow
0

昨天，我看到了张鑫旭同学写的文章是关于《文本框/域文字提示自动显示隐藏jQuery小 插件》 ，我以前也写过这样的教程《表单的文本字段默认值插件，基于 MooTools »》，其实说的都是同样的内容。不过张鑫旭同学加了一些可定制的小效果，使原本单调的默认值，更富有生机了，例如改变
文本字段/文本区域默认值的颜色，输入值的颜色，边框的颜色及输入框的背景颜色都是有可能的。

别的话我就不多说了，直接进入正题。

表单文本字段，文本区域的默认值自动显示和隐藏

 

View Demo »

 

我也就是把教程《表单的文本字段默认值插件，基于 MooTools »》这个例子完善一下。

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

var textDefaults=new Class({
	//实现
	Implements:[Options,Events],
	//选择参数
	options:{
		collections:false,
		blurColor: "#999",
		focusColor: "#333",
		chgClass: ""
	},
	//初始化构造函数
	initialize: function(options) {
		//设置选项
		this.setOptions(options);
		//调用功能
		this.init(this.options.collections);
	},
	init: function($el) {
			var $blurColor=this.options.blurColor,
			    $focusColor=this.options.focusColor,
				$chgClass=this.options.chgClass;
 
		    $el.each(function(tag){
 
				tag.setStyle('color',$blurColor);
 
				//var $vl=getProperty('value').trim();
				var $vl=tag.value;
 
				if($vl){
				   tag.addEvents({
						focus: function() {
							 if(this.value == $vl) {
							    this.value = '';
							 }
							 this.setStyle("color",$focusColor);
							 if($chgClass){
								this.toggleClass($chgClass);
							}
						}, 
						blur: function() {
							 if(this.value == '') {
							    this.value = $vl;
							 }
							 this.setStyle("color",$blurColor);
							 if($chgClass){
								this.toggleClass($chgClass);
							}
					    }
                       /*focus:function(){
							//alert($vl);
							//alert(this.getProperty('value').trim());
							if(this.getProperty('value').trim() === $vl){
							    this.setProperty('value','');
							}
							this.setStyle("color",$focusColor);
							if($chgClass){
								this.toggleClass($chgClass);
							}
 
						},
						blur:function(){
 
							if(this.getProperty('value').trim() === ""){
							    this.setProperty('value',$vl);
							}
							this.setStyle("color",$focusColor);
							if($chgClass){
								this.toggleClass($chgClass);
							}
						}*/
 
				   });	
				}
 
		    });
 
	}
 
});

调用类，实现一些可定制的功能。

1
2
3
4
5
6
7
8
9

window.addEvent('domready',function(){
 
	new	textDefaults({
	    collections:$$('input','textarea'),
		chgClass: "border",/*改变边框颜色的样式类*/
	    focusColor: "red"/*改变获得焦点时的文本颜色*/	
	});							
 
});

 

View Demo »

 

Leave a Comment