【JavaScript】鼠标点在文本框上文本框成密码框，如果不输入，鼠标离开，又变成文本框，文本框内显示”请输入密码“

原创 于 2008-05-23 11:11:00 发布 · 2.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了一种使用JavaScript实现网页中输入框从文本模式平滑切换到密码模式的方法。通过监听文本框的焦点变化，实现文本框与密码框之间的相互转换，提升用户体验。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Test </TITLE>
  <script>
 function show(obj){
 if(obj.type=="text"){
    obj.style.display = "none";
    document.getElementById('pass').style.display = "block";
    document.getElementById('pass').value="";
    document.getElementById('pass').focus();
 }else{
    var pass = document.getElementById('pass').value;
    if(pass.length<1){
      obj.style.display = "none";
      document.getElementById('txt').style.display = "block";
    }
 }
 }
  </script>
 </HEAD>

 <BODY>
<input id="txt" type="text"  value="请输入密码" onfocus="show(this)" style="width:150px;height:20px">
<input id="pass" type="password" value="" style="display:none;width:150px;height:20px" onblur="show(this)">

<script>


</script>
 </BODY>
</HTML>

鼠标点击文本框，此时文本框获得焦点，onfocus事件执行，在js里，将文本框隐藏，显示密码框，同时密码框获得焦点。

鼠标离开密码框，如果没有输入密码，则密码框隐藏，文本框显示。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值