js文本框点击时文字消失，失去焦点时文字出现

最新推荐文章于 2023-11-17 11:49:51 发布

原创最新推荐文章于 2023-11-17 11:49:51 发布 · 768 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

本文介绍了如何使用JavaScript实现文本框在获得焦点时隐藏默认提示文字，失去焦点时恢复显示提示文字的常见代码实现，包括直接在input元素中编写和利用jQuery库的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常会看到一些网站像注册要填表单的都会一种就是文本框有焦点时文本框提示消失，如果我们离开时文本西式文件提示就出来了，下面我来给大家介绍一些常见的代码。

方法一，直接在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>