文本框输入值文字消失常用的两种方法

1.这种相对来说较简单，举例子：

<input name="textfield" type="text" value="点击添入标题" style="color: gray;"
onfocus="if (value =='点击添入标题'){value =''}"
onblur="if (value ==''){value='点击添入标题'}" />

注：onfocus事件在对象获得焦点时发生;onblur 事件会在对象失去焦点时发生。

2.另外一种复杂一些，用jquery，直接贴代码细看：

<!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>文本框输入值文字消失</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$("#focus .input_txt").each(function(){var thisVal=$(this).val();//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示if(thisVal!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}//聚焦型输入框验证
                    $(this).focus(function(){$(this).siblings("span").hide();}).blur(function(){var val=$(this).val();if(val!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}    });});$("#keydown .input_txt").each(function(){var thisVal=$(this).val();//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示if(thisVal!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}$(this).keyup(function(){var val=$(this).val();$(this).siblings("span").hide();}).blur(function(){var val=$(this).val();if(val!=""){$(this).siblings("span").hide();}else{$(this).siblings("span").show();}})});});
</script>
<style type="text/css">form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}label{display:block;height:40px;position:relative;margin:20px 0;}span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}.border_radius{border-radius:5px;color:#B00000;}h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>
<body>
<form class="border_radius" id="focus"><h2>聚焦型提示语消失</h2><label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label><label><span>密码</span><input type="text" class="input_txt border_radius" /></label></form><form class="border_radius" id="keydown"><h2>输入型提示语消失</h2><label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label><label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/anns/p/4727279.html

文本框输入值文字消失常用的两种方法相关推荐

点击input文本框，文字消失 JS
<HTML><HEAD><title>点击input文本框,文字消失</title><script type="text/javascr ...
PHP教程：WebService最常用的两种方法
国内用PHP写WebService的真的很少,网上资料也没多少,公司的项目开发过程中,经历了不少这方面的东西,写出来以供大家参考(谢谢老农提供的WSDL和程序文件) 客户端代码: 01. 02. ...
ML：模型训练/模型评估中常用的两种方法代码实现(留一法一次性切分训练和K折交叉验证训练)
ML:模型训练/模型评估中常用的两种方法代码实现(留一法一次性切分训练和K折交叉验证训练) 目录模型训练评估中常用的两种方法代码实现 T1.留一法一次性切分训练 T2.K折交叉验证训模型训练评估中 ...
在Vue-cli脚手架中引入图片最常用的两种方法
CommonJS API定义了很多普通应用程序(主要指非浏览器的应用)使用的API,require就说其中之一,我们通常需要在组件中引入图片时,可以在Data里使用这个方法require(" ...
Unity 得到游戏组件的常用的两种方法
看了一些别人总结的得到组件的方法,很详细,但是初学者会看得眼花缭乱(我就是),这里给出最常用的得到游戏组件的两种方法.这里都以MeshRenderer 组件为例 1.当脚本挂在当前游戏物体,需要得到当 ...
文本框点击后文字消失总结
1.文本框显示默认文字: <textarea>白鸽男孩</textarea> <textarea>白鸽男孩</textarea> 2.鼠标点击文本框,默 ...
python图片转换成文字的手机软件_手机如何将图片转换成文字？用这两种方法转换很简单...
没有扫描仪怎么将纸质文档变成电子文档?图片上的文字太多想要提取没有好的方法吃苦受累的就是自己!今天分享给大家用手机将图片转换成文字的方法,轻松提取图片文字很简单! 方法一.迅捷文字识别--手机APP ...
substring常用的两种方法
xx.substring()括号中带的参数不一样,效果就会有很大的区别,详细如下: xx.substring(0,2)表示取第一个和第二个字符(0,1,2表示第一.二.三个字符,含头不含尾的原则就只包 ...
在文本框中提示用户输入内容格式的方法
希望达到的效果: 方法一:鼠标点击文本框时文字消失 <input id="login_name" type="text" οnblur="jav ...

文本框输入值文字消失常用的两种方法

文本框输入值文字消失常用的两种方法相关推荐

最新文章

热门文章