input密码输入提示效果代码实例

最新推荐文章于 2024-06-26 15:51:34 发布
最新推荐文章于 2024-06-26 15:51:34 发布
阅读量1.1k 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/561680
版权

本章节分享一段代码实例，它实现了input密码框输入提示效果。

也就是说在密码输入之前会有提示文本，比如"请输入密码"。

代码实例如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 		 
        
 
         
 
          <!DOCTYPE html> 
         
 
         
 
          < 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
         
 
          < 
          style 
          type 
          = 
          "text/css" 
          > 
         
 
         
 
          input { 
         
 
         
 
             
          width:180px; 
         
 
         
 
             
          height:30px; 
         
 
         
 
          } 
         
 
         
 
          </ 
          style 
          > 
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          < 
          body 
          > 
         
 
         
 
          < 
          input 
          type 
          = 
          "password" 
          placeholder 
          = 
          "请输入密码" 
          /> 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
placeholder属性可以参阅input placeholder一章节。
 
 
低版本IE浏览器不支持，要兼容所有浏览器可以参阅实现密码框提示文本代码实例一章节。
 
 

 
 

 
 
原文发布时间为：2017-3-1
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：input密码输入提示效果代码实例
 


                

        

        




    




    

      

        

            

              
                
                  weixin_34221332
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
模拟input 密码框效果 （中文输入法处理）

				
			

			

				

					qq_31620497的博客
				

				

					05-21
					
					1174
					
				

			

		

		

			
				
inputPwd: (function () {
        var map = {};
        function inputPwd(el) {
            // var $el = $(el);
            // var key = $el.attr('input-pwd');
            // map[key] = $el;
            this.el = el;
            this.initInput();
        }.

			
		

	



                

              
                



	

		

			

				
					
前端实现input标签输入框密码框显示文字效果

				
			

			

				

					weixin_44566194的博客
				

				

					08-27
					
					3946
					
				

			

		

		

			
				
思路：采用 input 标签，给它设置CSS样式，这里本人将两个input标签放在同一行，并且希望两个input标签中间的间隙能够设置，想到了利用浮动 float 的知识，给第一个标签添加左浮动，同时要给父盒子的 font-size 设定为 0;利用JavaScript 的 DOM 事件知识，先获取元素，后注册事件（函数），利用 if 语句判断，点击 input 框（注册鼠标事件 onfocus）就显示 空字符串，并改变文本框的边框（border）颜色，原先的文本框颜色设置为#999；......

			
		

	



                


  
              

                


	

		

			

				
					
网页特效代码   输入密码后才能进入页面

				
			

			

				

					11-25
				

			

		

		

			
				
网页特效代码                                        输入密码后才能进入页面

			
		

	





	

		

			

				
					
vue3+ant-design-vue 实现 input 模拟密码框效果

					
最新发布

				
			

			

				

					gaotlantis的博客
				

				

					06-26
					
					391
					
				

			

		

		

			
				
网上找到了很多简单的方案，比如加 readonly 属性再去掉等，都没有效果。只剩下使用 input 模拟密码框交互的方案。备注：代码逻辑上，依赖于光标位置的赋值取值时机先后；selectionchange 会比 change 事件后触发。测试：怎么忘记密码和确认密码还有记住密码的提示框？测试：怎么忘记密码和确认密码被自动填充记住的密码了？我： 反手给密码框加上了 autocomplete="off"如果有不足或有问题的地方，欢迎留言评论。的思路做了 vue3 的版本。

			
		

	



		

			
		



	

		

			

				
					
微信小程序input输入框密码的显示与隐藏

				
			

			

				

					aaa123aaasqw的博客
				

				

					05-12
					
					1231
					
				

			

		

		

			
				
【代码】微信小程序input输入框密码的显示与隐藏。

			
		

	





	

		

			

				
					
jQuery输入密码强度验证代码.zip

				
			

			

				

					09-21
				

			

		

		

			
				
首先，我们来看标题中的关键词"jQuery输入密码强度验证代码"，这表明我们要讨论的是一个基于jQuery的前端密码验证机制，它能够实时评估用户输入的密码强度，并提供反馈。通常，这种功能会根据密码的长度、字符复杂性...

			
		

	





	

		

			

				
					
React-Native TextInput组件详解及实例代码

				
			

			

				

					09-01
				

			

		

		

			
				
React-Native 的 `TextInput` 组件是用于创建用户输入字段的核心组件，它可以处理文本输入、密码输入等场景。在移动应用开发中，`TextInput` 是不可或缺的部分，它为 Android 和 iOS 提供了一致的跨平台体验。下面...

			
		

	





	

		

			

				
					
js实现input密码框提示信息的方法(附html5实现方法)

				
			

			

				

					11-24
				

			

		

		

			
				
本文实例讲述了js实现input密码框提示信息的方法。分享给大家供大家参考，具体如下： 今天我们主管说要在密码框加入个”请输入密码”的提示信息,第一次的时候本来想着用修改input type 属性的方法呢,结果有某些特别...

			
		

	





	

		

			

				
					
Python中变量的输入输出实例代码详解

				
			

			

				

					09-18
				

			

		

		

			
				
例如，password=input("请输入银行卡密码")这条语句将提示用户输入密码，并将用户的输入存储在变量password中。  接下来，我们看一下如何将输入的字符串转换为其他类型。Python中的input()函数总是返回字符串类型的...

			
		

	





	

		

			

				
					
ajax验证用户名和密码的实例代码

				
			

			

				

					10-22
				

			

		

		

			
				
如果用户输入为空，会弹出提示。然后构造请求URL，并在XMLHttpRequest对象上执行一系列操作：  ```javascript function login() {  createXMLHttpRequest();  var user = document.getElementById("username").value...

			
		

	





	

		

			

				
					
input输入密码变黑点密文的实现方法

				
			

			

				

					10-20
				

			

		

		

			
				
本文主要介绍了Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式。具有一定的参考价值，下面跟着小编一起来看下吧

			
		

	





	

		

			

				
					
模仿password输入框的实现代码

				
			

			

				

					09-02
				

			

		

		

			
				
下面小编就为大家带来一篇模仿password输入框的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
给html   input 输入框添加灰色提示信息 ，例如：请输入密码提示信息

				
			

			

				

					从零开始的博客
				

				

					09-09
					
					1884
					
				

			

		

		

			
				
placeholder="这里输入文字" size="22"  // 隐藏但不消失，但是点击不消失 ,自己用这种


onFocus="if(value==defaultValue){value='';this.style.color='#000'}" 
 onBlur="if(!value){value=defaultValue;this.style.color='#999'}" 
style=...

			
		

	





	

		

			

				
					
解决input设置密码属性后导致的input样式失效问题

				
			

			

				

					榕城候佳人的博客
				

				

					04-02
					
					529
					
				

			

		

		

			
				
大概原因就是浏览器有自动保存密码的功能。为了解决这个问题也很简单，我们只用在css最顶端加上这段代码。这样即使自动保存密码也不影响我们的样式（下面就显示了我之前设置的密码）问题描述：input设置密码属性后导致input设置的所有样式失效。在设计登录页面时，遇到一个之前没遇见的问题，这里记录一下。但是当我在密码输入框设置密码属性后（如下）首先我对登录部分的盒子设置了如下属性。这样按道理可以实现下面的效果。

			
		

	





	

		

			

				
					
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

			
		

	





	

		

			

				
					
input关于密码输入框

				
			

			

				

					csy_119的博客
				

				

					10-08
					
					1470
					
				

			

		

		

			
				
当我们设置input的类型为password 时。给一个

autocomplete="off" 还是会自动填充一些文本进去。

这个时候改成autocomplete="new-password"就不会自动填充了嘻嘻。

autocomplete="off" 当类型为其他的时候就不会再自动填充了，只是对password失效


...

			
		

	





	

		

			

				
					
通过使用简单的JavaScript的效果实现密码输入框显示与隐藏的效果

				
			

			

				

					小杨的博客
				

				

					07-03
					
					3655
					
				

			

		

		

			
				
通过使用简单的JavaScript的效果实现密码输入框显示与隐藏的效果

			
		

	





	

		

			

				
					
js 实现 input密码框 密码的显示和隐藏功能

				
			

			

				

					qq_39750019的博客
				

				

					06-16
					
					210
					
				

			

		

		

			
				
需求：
1.





			
		

	





	

		

			

				
					
给出上诉实例代码

				
			

			

				

					06-01
				

			

		

		

			
				
非常抱歉，上述实例代码是错误的...其中登录处理Servlet负责验证用户输入的用户名和密码，如果验证通过则保存用户信息到Session中并跳转到主页，否则返回登录页面并给出错误提示。主页展示用户信息并提供退出登录功能。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值