井井客

搜索

input点击文字消失 离开若无值则显示初始值

做表单时你必须要知道的一段代码,对交互很好使的一段JQ代码,目前只测试了一下谷歌和IE兼容,关键就是defaultValue这个方法,获取到input初始值,然后进行相应一些判断。

input点击文字消失 离开若无值则显示初始值

整体代码如下:

<html>
<head>
<title>input点击文字消失 离开若无值则显示初始值</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
* { padding:0; margin:0; border:0;}
input,textarea { width:500px; background:#e8e8e8; display:block; margin:0 auto 10px; padding:8px 10px;}
textarea { line-height:20px; height:60px;}
input:focus,textarea:focus { background:pink;}
</style>
</head>
<body>
<div class="main">
<input type="text" value="请输入您的姓名" class="checkInput" />
<input type="text" value="请输入您的手机号" class="checkInput" />
<textarea class="checkInput">请输入您想说的话</textarea>
</div>
<script>
$(".checkInput").focus(function(){
	  if($(this).val() == this.defaultValue){
		  $(this).val("");
	  }
 }).blur(function(){
	  if($(this).val() == ""){
		   $(this).val(this.defaultValue);
	  }
 });
</script>
</body>
</html>

input点击文字消失 离开若无值则显示初始值

代码目标是将带有checkInput样式的表单元素获取焦点时,当元素值等于初始值时则input点击让input文字消失;而当离开焦点时则判断元素值若为空值则将恢复为初始值。

更换一下选择器,可以达到更棒的效果,下面只贴出JQ代码的部分

$(":input").focus(function(){
	  if($(this).val() == this.defaultValue){
		  $(this).val("");
	  }
 }).blur(function(){
	  if($(this).val() == ""){
		   $(this).val(this.defaultValue);
	  }
 });

”:input“选择器是指所有input元素,试验证实,它即可以代表input,也能代表textarea,有兴趣的可以搜索看看。

总结其实就是defaultValue方法,做表单真的比较有用。

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:input点击文字消失 离开若无值则显示初始值
本文链接:http://www.jingjingke.com/c/0195.html

上一篇:JS与JQ获取浏览器和屏幕尺寸
下一篇:JQ和JS分别获取父亲、兄弟、子节点的方法

文章分类

相关阅读

随便看看