`
alivoa
  • 浏览: 18217 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Demo - Clear Initial Tip Text (V0.1)

    博客分类：
  • js
JavaScriptCC++C#XHTML
阅读更多

版本号：V0.1

调用方法：

initValue("id","initial text");

id -- input/textarea 的id

initial text -- 初始提示文字

.c_txt  可以用于代表初始化文字的颜色。

缺陷：

使用class name作为判断依据…………不好。

没加trim去空格。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO - Clear Initial Tip Text</title>
<style type="text/css">
dl, dt, dd {
	margin:0;
}
#txt, #txtarea {
	border:1px solid #999;
}
.bg_input {
	background:#deedfd;
}
.c_txt {
	color:#a1a1a1;
}
</style>
<script type="text/javascript">
	function initValue(name,text){
		var obj = document.getElementById(name);
		obj.className = "c_txt";
		obj.value = text;
		/*focus*/
		obj.onfocus = (function(){
			if(obj.value == text && obj.className == "c_txt"){
				obj.value = "";
			}
			obj.className = "bg_input";
		});
		/*blur*/
		obj.onblur = (function(){
			obj.className = "";
			if(obj.value ==""){
				obj.value = text;
				obj.className = "c_txt";
			}
			else{
				obj.className = "";
			}
		});
	}
	/*submit function for clear initial tip text*/
	function initVal(){
		for ( i= 0; i < document.tiptest.elements.length; i++){
			if(document.tiptest.elements[i].className =="c_txt"){
				document.tiptest.elements[i].value = "";
			}
		}
		return false;
	}
	document.onload = initValue();
</script>
</head>
<body>
<form action="post" name="tiptest" onsubmit="return initVal();">
	<dl>
		<dt>单行文本框：</dt>
		<dd>
			<input id="txt" type="text" value="" />
		</dd>
		<dt>多行文本域：</dt>
		<dd>
			<textarea id="txtarea"></textarea>
		</dd>
	</dl>
	<div>
		<input type="submit" value="Submit" />
	</div>
</form>
<script type="text/javascript">
	initValue("txt","ab");
	initValue("txtarea","This is a textarea initial value.");
</script>
</body>
</html>

 

分享到：
| 关于css sprites
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics