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

最新推荐文章于 2021-09-28 11:23:11 发布
原创 最新推荐文章于 2021-09-28 11:23:11 发布 · 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里，将文本框隐藏，显示密码框，同时密码框获得焦点。

鼠标离开密码框，如果没有输入密码，则密码框隐藏，文本框显示。
java swing文本框（密码框）没有内容时,占位显示默认信息（仿IOS）
12-29
JTextField及JPasswordField的空值处理，思路是采用图层Lable，并利用lable的无点击特性，类似ios文本框的空值默认显示。
JavaScript如何实现在文本框(密码框)输入提示语
10-23
为了提高用户的操作便捷性和界面友好性，常常会在文本框（包括密码框）中设置输入提示语，如“请输入用户名”和“请输入密码”。JavaScript作为一种强大的客户端脚本语言，可以帮助我们实现这些功能。本文将详细讲解...
鼠标点击 文本框 消失 js
被啃de萝卜
06-20 593
想起来前几天有个朋友问这个问题，就贴出来，很简单的js<INPUT class=input2       onblur="if(this.value==){this.value=请输入想查询的关键字;}"       style="WIDTH: 360px; COLOR: #999999"       onclick="if(this.value==请输入想查询的关键字，
鼠标点在文本框上文本框成密码框，如果不输入，鼠标离开，又变成文本框，文本框内显示”请输入密码“(本内容来自唯才教育网http://www.hn1c.com 原文地址：http://hao.cspeng
smilewlm的专栏
06-02 1536
转载地址：http://blog.youkuaiyun.com/siyue_qi/article/details/2472422 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> HTML>  HEAD>   TITLE> Test TITLE>   script>  function show(obj){  if(
JavaScript 文本框变成密码框
兰染
11-29 2869
Test function show(obj) { if(obj.type=="text") { obj.style.display = "none"; document.getElementById('pass').style.display = "block"; document.getElementById('pass').value=""; document.getE
在文本框中显示 请输入什么信息
goodyatou的专栏
09-29 980
            var txtTrain=document.getElementById("txtXianlu");        function searchclearInfoJs(obj){         if(txtTrain.value=="输入地点或车次" && obj==0)         {          txtTrain.style.color="#000";  
鼠标焦点离开文本框时验证的js代码
10-27
本文所关注的是一个特定场景——在用户填写完毕并试图离开一个文本框（例如，通过鼠标点击其他地方或使用Tab键切换焦点）时，对文本框中的数据进行验证。 在给出的示例代码中，我们使用了HTML和JavaScript结合的...
jQuery实现鼠标单击网页文字后在文本框显示的方法
10-24
标题所包含的知识点是“jQuery实现鼠标单击网页文字后在文本框显示的方法”，这意味着我们需要掌握jQuery库的使用，特别是关于如何处理鼠标点击事件以及如何在网页中动态显示或更新内容。描述部分进一步细化了知识点...
javascript限制文本框输入值类型的方法
10-24
在JavaScript中，限制文本框（`<input type="text">`）输入值的类型是一项常见的需求，例如确保用户只能输入特定格式的数据，如数字、日期或其他格式。在本例中，我们将关注如何限制文本框只接受数字和小数点。这...
小问题总结：鼠标点击到输入框（input）里的时候，输入框的提示消失，鼠标再移开，输入框提示出现
网站运营
03-16 6811
问题如标题： 鼠标点击到输入框（input）里的时候，输入框的提示消失，鼠标再移开，输入框提示出现。如图所示： 做法如下： 注意点为input的onblur和onfocus属性。另外也有简单的if判断。很方便很实用。 演示地址为：http://www.ya-jing.cn
密码框点击切换input类型
zcs123ok的博客
06-27 1112
今天有个需求，就是常见的input框点击后边小眼睛，会显示输入的密码，现在把它单独拿出来，因为懒，所以用”=“来代替小眼睛。css代码部分：   *{ padding: 0; margin: 0; } .div{ border: 1px solid #e4393c; width: 270px; height: 30px; margin: ...
js 弹窗和登录框
weixin_34253126的博客
01-24 979
一、css+js简单弹窗： 当鼠标放在上方登录时，弹出下方黑色方框： <!doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"></scri...
写一个密码框，可显示密码
qq_45651646的博客
04-10 1101
今天呢，就来写一个密码框。 废话不多说，直接上代码，这是CSS部分的 这是html部分的代码 这是js部分的代码 然后呢，效果显示图为如下， 这是刚输入密码时，例如我输入的是 “123456” 然后点击眼睛就可以显示密码 ...
Js、Jquery密码输入框的密码显示与隐藏
夏已微凉、
04-13 3208
                                            Js、Jquery密码输入框的密码显示与隐藏                1、基本理解：    鼠标左键按下去时,把输入框的属性改为text;鼠标左键松开时,把输入框的属性改为password2、html代码：&lt;html&gt;    &lt;head&gt;        &lt;meta http-...
javascript-输入框内容提示及隐藏
qq_39111074的博客
09-28 3110
有时输入框较小，希望输入内容后，出现一个有放大输入内容的提示框 实现思路 页面上先编写出提示框，然后将提示框的css属性：display设置成none，隐藏起来 获取输入框元素对象、信息提示框元素对象 为输入框元素对象绑定键盘事件- - -keyup, 事件处理程序：判断输入的内容是否为空，不为空- - -将输入框的内容赋值给信息提示框，并设置信息提示框显示：display设置成block；为空，设置提示框不显示 添加获取焦点和失去焦点事件。 blur- - -失去焦点：鼠标不选中输入框，输入框中无光标闪
jquery更改输入框type为密码框password
热门推荐
谢彬の优快云专栏
10-25 1万+
很蛋疼的一个问题： 用juqery将文本框变成密码框 $(document).ready(function(){ $("#e1").val("hello world!"); $("#e1").click(function(){ alert('11'); $("#e1").attr("type","password"); $("#e1")
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值