Input框 type 类型 password 转换为label 的方法

最新推荐文章于 2025-05-28 21:47:59 发布
原创 最新推荐文章于 2025-05-28 21:47:59 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在前端开发中实现密码输入框与标签动态切换的方法。使用两个元素，一个为密码输入框，另一个为普通的标签，通过显示与隐藏的方式实现了密码输入后的展示效果。适用于IE浏览器等不支持直接改变input类型的情况。

今天做项目遇到一个问题，有一个input框，一开始是password框，输入密码之后鼠标移动到其他位置，password框变为label,于是在网上找了一种方法

1.jquery解决方式$("#id").attr("type","text");

但是这种方式在ie下又不支持，input的type属性是只读的，没办法动态修改，所以就想到了下面的方法。

2.两种输入框，通过显示和隐藏来实现

'<input  type="password" id="id" name="name" onblur="passwordcheck()" onclick="ChangeTopassword()">'
'<label  type="text" id="id2" name="name2" style="display:none" onclick="ChangeTopassword()"></label>

$('#id')[0].style.display="none";
$('#id2')[0].style.display="";
$('#id2').text(value);   //label赋值方式 这三句是主要代码，取到代码部分自己加进去

function ChangeTopassword() {
	var name=document.getElementById('name').value; 
	if (name!= null && name!= "") {
		$('#id')[0].style.display="";
		$('#id2')[0].style.display="none";
		$('#name').val("");
		$("#id").focus();
	}
}



ps:文章没什么技术含量，只是想记录下来作为自己成长的印记，每天进步一点




                

        

    


  



    



                



	

		

			

				
					
原生小程序 之 input切换 text与password类型

				
			

			

				

					weixin_47409897的博客
				

				

					07-06
					
					905
					
				

			

		

		

			
				
1

			
		

	



                

            
              



	

		

			

				
					
模仿password输入框的实现代码

				
			

			

				

					09-02
				

			

		

		

			
				
 <input type="hidden" id="password1" name="password1"/>  ```  在这个HTML结构中，`#password0`是可见的输入框，当用户输入时，其值会自动被替换为星号。`#password1`是隐藏的输入框，用于储存真实的密码值。`...

			
		

	



              


  
              

                


	

		

			

				
					
input标签选中样式设置及input密码框可视设置

					
热门推荐

				
			

			

				

					start_sea的博客
				

				

					07-31
					
					1万+
					
				

			

		

		

			
				
input标签选中样式设置及input密码框可视设置
关于input标签样式使用的一些总结：
1、input标签选中时的光标紧贴边框的问题：
input标签默认光标会紧贴边框，设置padding样式可解决；
2、input标签选中样式：
input标签可对选中时的样式进行设置，同时要注意input标签外边框和内边框的影响。可通过box-shadow属性设置选中时的边框阴影。

3、input标签的type属性：
input标签的type属性有多个属性值：button、checkbox、file、hidden

			
		

	





	

		

			

				
					
Vue 3-计算属性的getter,setter

				
			

			

				

					Lin16819的博客
				

				

					09-17
					
					1002
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-...

			
		

	



		

			
		



	

		

			

				
					
把input类型为password来回切换成可见或隐藏的

				
			

			

				

					yyjourney的博客
				

				

					08-09
					
					2560
					
				

			

		

		

			
				
项目笔记************原理也就是在隐藏的时候input的类型是password，显示的时候是text
html代码:

div class="div-input">
    input type="password" id="password1" placeholder="由8-16位的字母、数字组合">
    i class="pass-on1">i>
div>
js代码：


			
		

	





	

		

			

				
					
Input标签的美化，借用lable

				
			

			

				

					weixin_30279315的博客
				

				

					10-18
					
					255
					
				

			

		

		

			
				
<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style>			*{				margin:0;padding:0;list-style: none;			}			li{				position: relative;		...

			
		

	





	

		

			

				
					
{ prop: 'password', label: '用户密码', type: 'input' },怎么把input设置成密码框格式

					
最新发布

				
			

			

				

					08-15
				

			

		

		

			
				
<input type="password" id="pwd" name="password"> ```  #### 关键特性说明 1. **掩码显示**   输入内容自动转换为 `•` 或 `*` 等掩码符号   2. **基础属性**   - `name`：表单提交时的参数名  - `id`：用于关联 `...

			
		

	





	

		

			

				
					
<form id="loginForm" action="/LoginServlet" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required />
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required />

    <button type="submit">Log In</button>
</form>这部分登录HTML页面能帮我改成jsp文件的登录页面吗

				
			

			

				

					05-04
				

			

		

		

			
				
 <input type="password" id="password" name="password" required />
   <button type="submit">Log In       <!-- JavaScript Validation -->  <script src="validation.js"></script>   ```  ---  #### 3. **...

			
		

	





	

		

			

				
					
submit类型在button上或者input如何提交文本框和密码框的值

				
			

			

				

					07-12
				

			

		

		

			
				
 <input type="password" id="password" name="password" />    <input type="submit" value="Submit" />  ``` 当用户点击“Submit”按钮时，浏览器会将 `username` 和 `password` 字段的值编码后发送至 `/submit` ...

			
		

	





	

		

			

				
					
<p><label>用户名：</label><input name="user"/></p>为什么错了

				
			

			

				

					02-03
				

			

		

		

			
				
 <input type="password" name="password_()?>" placeholder="Password">  ```  上述方法通过PHP代码片段`(); ?>`实现每次页面加载都生成不同的名字前缀，从而避免了浏览器的记忆功能影响用户操作体验。  #### 2. ...

			
		

	





	

		

			

				
					
如何给input type="password"的输入框赋默认值？

				
			

			

				

					aspgreener的专栏
				

				

					07-09
					
					6221
					
				

			

		

		

			
				
google_ad_client = "pub-2048279401139630";google_ad_slot = "8856771542";google_ad_width = 728;google_ad_height = 90;document.write("");        最近做一个项目的时候，遇到这样的需求，就是用户登录之后要能在密码输入框里面显示密码，大家都知道，直接给 inp

			
		

	





	

		

			

				
					
html密码域的type属性,查看网页黑点密码 将type="password"中password修改成为text

				
			

			

				

					weixin_29798379的博客
				

				

					06-05
					
					6236
					
				

			

		

		

			
				
将type="password"中的password修改成为text修改完成后点击回车查看网页黑点密码，这个功能很好用哦用了这招，将小黑点变成直接显示密码！忘记密码也能立刻想起来了操 作 步 骤步骤一、全选密码后，右键点击检查步骤二、将type="password"中的password修改成为text修改完成后点击回车步骤三、这样之前是黑点的密码，会直接显示出来这么一想，记住密码这个功能有非常大的...

			
		

	





	

		

			

				
					
PassWord控件

				
			

			

				

					weixin_34234829的博客
				

				

					04-08
					
					210
					
				

			

		

		

			
				
1     <StackPanel Margin="10">
2             <Label>Text:</Label>
3             <TextBox />
4             <Label>Password:</Label>
5             <PasswordB...

			
		

	





	

		

			

				
					
禁用input自动补全，模拟type=password输入字符显示为星号

				
			

			

				

					奔跑的痕迹的博客
				

				

					03-31
					
					2971
					
				

			

		

		

			
				
根据改地址做了一个模拟如下：
<template>
  <div class="text-input" :class="right ? 'textinput-right' : ''">
    <span
      v-if="star"
      class="pwd-txt"
      :style="right ? { paddingRight: '5px' } : { paddingLeft: '5px' }"
    >
      {{ password

			
		

	





	

		

			

				
					
解决input 密码框内密码的显隐问题

				
			

			

				

					Reagan_的博客
				

				

					01-30
					
					4020
					
				

			

		

		

			
				
引入问题：
我们在很多场景下都会有输入密码的情况，输入的时候，框右端会有一个眼睛，可以选择密码是否能看见。

在具体实现的过程中我发现眼睛的点击事件会和input的失去聚焦事件冲突，也就是说我们点击眼睛，切换明文的同时却失去了焦点，在正常输入下，输入框应该仍然保持聚焦状态。
当时写的代码是这样的：
input.onfocus = function() {
	if (input.value == "...

			
		

	





	

		

			

				
					
HTML之表单标签中input的属性type =“password“时“没眼睛”问题（无法主动显示或是隐藏密码）

				
			

			

				

					m0_53190754的博客
				

				

					03-03
					
					3315
					
				

			

		

		

			
				
html写表单提交时人，如用户名以及密码，type = "password"密码被隐藏，无法查看;type = "text"，密码被显示无法隐藏。代码如下edge浏览器在运行html时，会给type = "password"的input自动加上可以睁开或是闭上的眼睛图标，用来显示或隐藏密码。但是chrome不会，得自己封装实现。

			
		

	





	

		

			

				
					
如何在 HTML 中创建一个密码输入框，并且实现密码可见 / 不可见的切换功能，需要使用哪些 HTML 和 JavaScript 知识？

				
			

			

				

					前端大白话
				

				

					05-28
					
					1329
					
				

			

		

		

			
				
前端小伙伴们，有没有被用户吐槽过“密码输错了但看不见，得重新输”？今天咱们就聊聊“密码可见切换”这个超实用的交互功能——用HTML+JavaScript，3步就能搞定！看完这篇，你不仅能写出代码，还能和面试官唠明白背后的逻辑～

			
		

	





	

		

			

				
					
input type=“password“密码自动带入密码如何解决

				
			

			

				

					张木期的博客
				

				

					11-15
					
					9204
					
				

			

		

		

			
				
用input type="password"密码框，浏览器会自动带入密码，可以加个autocomplete=“new-password”
比如
 <a-input-password
            v-model="password"
            style="width:370px;margin-left:10px;"
            placeholder="8-15个字符，必须同时包含数字、英文、特殊符号"
            autocomplete="new-

			
		

	





	

		

			

				
					
input的type类型password 密码，jquery点击如何显示密码，查看是否正确

				
			

			

				

					qq_39951524的博客
				

				

					05-13
					
					1059
					
				

			

		

		

			
				
input的type类型password 密码,jquery点击如何显示密码,查看是否正确
要实现点击时显示密码，可以使用jQuery来监听输入框的点击事件，并根据需要切换输入框的类型从而实现密码的显示和隐藏。以下是一个简单的实现示例：

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值