我们经常会看到一些网站像注册要填表单的都会一种就是文本框有焦点时文本框提示消失,如果我们离开时文本西式文件提示就出来了,下面我来给大家介绍一些常见的代码。
方法一,直接在input编写
代码如下 |
复制代码 |
<input type="text" onfocus="if(this.value=='指中我看看什么效果') this.value='';" onblur="if(this.value=='') this.value='指中我看看什么效果';" value="指中我看看什么效果" style="color:#666" size="6" id="s_name" name="s_name">
|
方法二,
代码如下 |
复制代码 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charsetGB2312" /> <title>文本框点击时文字消失,失去焦点时文字出现 </title> </head> <body> <input type="text" value="请输入您的姓名" id="myinput" /> </body> </html> <script language="JavaScript" type="text/javascript"> function addListener(element,e,fn) { if(element.addEventListener) { element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(myinput,"click",function(){ myinput.value = ""; }) addListener(myinput,"blur",function(){ myinput.value = "请输入您的姓名1 "; })
</script>
|
方法三,利用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>jquery文本框默认文字点击消失的效果</title> <script src="jquery.min.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("#focus label").hide(); }else{ $(this).siblings("#focus label").show(); } //聚焦型输入框验证 $(this).focus(function(){ $(this).siblings("#focus label").hide(); }).blur(function(){ var val=$(this).val(); if(val!=""){ $(this).siblings("#focus label").hide(); }else{ $(this).siblings("#focus label").show(); } }); }) $("#keydown .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!=""){ $(this).siblings("#keydown label").hide(); }else{ $(this).siblings("#keydown label").show(); } $(this).keyup(function(){ var val=$(this).val(); $(this).siblings("#keydown label").hide(); }).blur(function(){ var val=$(this).val(); if(val!=""){ $(this).siblings("#keydown label").hide(); }else{ $(this).siblings("#keydown label").show(); } }) }) }) </script> <style type="text/css"> form { width:400px; margin:10px auto; border:solid 1px #E0DEDE; background:#FCF9EF; padding:20px; box-shadow:0 1px 10px rgba(0, 0, 0, 0.1) inset;font-family:Arial; } .tonjay { display:block; height:40px; position:relative; margin:20px 0; } #focus label,#keydown label { position:absolute; line-height:40px; left:10px; top:0; color:#ccc; cursor:text; background:none;} .input_txt { width:398px; border:solid 1px #ccc; box-shadow:0 1px 10px rgba(0, 0, 0, 0.1) inset; height:38px; line-height:38px; padding-left: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; padding:0; margin:0;} </style> </head> <body> <form class="border_radius" id="focus"> <h2>聚焦型提示语消失</h2> <div class="tonjay"> <input type="text" class="input_txt border_radius" id="Input" /><label for="Input">js特效大全网注册 </label> </div> <div class="tonjay"> <input type="text" class="input_txt border_radius" id="Input2" /><label for="Input2">输入用户名</label> </div> </form> <form class="border_radius" id="keydown"> <h2>输入型提示语消失</h2> <div class="tonjay"> <input type="text" class="input_txt border_radius" id="Input3" /><label for="Input3">js特效大全网注册 </label> </div> <div class="tonjay"> <input type="text" class="input_txt border_radius" id="Input4"/><label for="Input4">输入用户名</label> </div> </form>
</body> </html>
|
分享到:
相关推荐
NULL 博文链接:https://luanxiyuan.iteye.com/blog/1744279
js实现input文本框点击时文字消失,失去焦点
文本框点击时文字消失,失去焦点时文字出现 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是“文本框点击时文字消失,失去焦点时文字出现”这个效果;这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码;自己会...
在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是“文本框点击时文字消失,失去焦点时文字出现”这个效果;这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码;自己会...
我们在登录网站的时候,文本框中经常会有提示你输入的信息,当你点击文本框,提示信息自动消失,当文本框什么都没有,而且失去焦点的时候,又有了提示文字。 1.原型开发,先做一个简单的: 我们首先需要一个html文件...
点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 <input type=button name="Submit1" value="郭强" size=10 class=s02style="background-color:rgb(235,207,22)"> 3。。。。。。
1.文本框焦点问题 onBlur:当失去输入焦点后产生...(value=='') {value='mm'}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 郭强" size=10 class=s02 style="background-color:rgb(235,207,22)">
(value=='''') {value=''郭强''}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 郭强" size=10 class=s02 style="background-color:rgb(235,207,22)">3.鼠标移入移出时颜色变化找吧" name="B1" ...
(value=='') {value='mm'}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 郭强" size=10 class=s02 style="background-color:rgb(235,207,22)"> 3.鼠标移入移出时颜色变化 找吧" name="B1" ...
(value=='') {value='mm'}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 郭强" size=10 class=s02 style="background-color:rgb(235,207,22)"> 3.鼠标移入移出时颜色变化 找吧" name="B1" ...
本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果。分享给大家供大家参考,具体如下: 思路: 1、首先用把密码框用txt暂时替代,并赋上默认值 <input type=”text” value=”请输入密码...
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入...点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 <input type=button name=”Submit1″ value=”郭强” size=10 class=s02 style
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当...点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 <input type=button name=”Submit1″ value=”郭强” size=10 class=s02 sty
* 在输入框下拉菜单选择通用填表项时, 输入框会失去焦点. [迅雷下载模块] * 在英文系统下, 第一次启动傲游迅雷加速下载时语言显示不正确. * 关闭浏览器时迅雷下载模块可能会崩溃. 傲游浏览器3.1.7.1000 本次更新...
-修正了Firefox下Zoom In/Out时页面消失的BUG。 -删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton...
-修正了Firefox下Zoom In/Out时页面消失的BUG。 -删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton...