input标签的placeholder属性

最新推荐文章于 2024-04-18 15:39:08 发布
最新推荐文章于 2024-04-18 15:39:08 发布
阅读量1.3k 收藏
点赞数
分类专栏： placeholder js 文章标签： 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang100k/article/details/46776451
版权

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

input标签的placeholder属性 配合js 可实现提示信息在输入字段为空时显示，并会在获得焦点时消失。

<input id="rip" name="rip" type="text" class="input-xlarge" placeholder="example:192.168.1.1" οnblur="if(this.placeholder==''){this.placeholder='example:192.168.1.1'}" οnfοcus="if(this.placeholder=='example:192.168.1.1'){this.placeholder=''}"/><pre name="code" class="html">









 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  「已注销」
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
div模拟input的placeholder属性

				
			

			

				

					xiaoxu的博客
				

				

					12-03
					
					1430
					
				

			

		

		

			
				
今天有做到这么一个需求，
一个div输入框，它模拟input输入框，并且也模拟input输入框的placeholder属性，但是现在这个placeholder属性值并不是唯一确定不变的。这个div输入框其实是一个类似微信朋友圈的回复输入框一样，当输入为空的时候，要显示给用户 @了谁，所以这个placeholder的内容是会变化的。
在网上查了几种方式，使用js操作代价太大，行内css又不支持伪类，...

			
		

	



                

            
              



	

		

			

				
					
认识input输入框的placeholder属性

				
			

			

				

					weixin_30654419的博客
				

				

					06-18
					
					3309
					
				

			

		

		

			
				
我们来认识下input输入框的placeholder属性。
placeholder 属性提供可描述输入字段预期值的提示信息。(placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password)
该提示会在输入字段为空时显示，并会在字段获得焦点时消失（IE10+获取焦点消失，Chrome，F...

			
		

	



              


  
              

                


	

		

			

				
					
HTML 5 <input> placeholder 属性

				
			

			

				

					weixin_34390996的博客
				

				

					12-19
					
					79
					
				

			

		

		

			
				
原文链接：http://www.w3school.com.cn/html5/att_input_placeholder.asp
HTML 5 <input> placeholder 属性

HTML 5 <input> 标签


实例
带有 placeholder 文本的搜索字段：
<form action="demo_form.asp" method...

			
		

	





	

		

			

				
					
input中placeholder属性

				
			

			

				

					Aaron Con的博客
				

				

					05-27
					
					920
					
				

			

		

		

			
				
注意：IE 9及更早的版本不支持该属性

//列表框输入前默认灰色字体，输内容时字体加黑
<input type="text" name="" id="user_name" placeholder="用户名/学号/手机号">



可以使用js中的焦点事件完成该功能

1.onfocus获得焦点
2.onblur失去焦点

<script>
    var text = document.querySelector('input');//获取元素
    text.onfocus .

			
		

	



		

			
		



	

		

			

				
					
关于表单元素input的placeholder属性

				
			

			

				

					lyna的博客
				

				

					08-30
					
					1864
					
				

			

		

		

			
				
1、自定义颜色

默认的文字占位符颜色为浅灰色，也可以使用伪类/伪元素来改变它的颜色。


input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {  ...

			
		

	





	

		

			

				
					
使用placeholder属性设置input文本框的提示信息

				
			

			

				

					11-21
				

			

		

		

			
				
input type="search" name="user_search" placeholder="Search W3School" />  <input type="submit" /> </form> 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息（hint）。 该提示会...

			
		

	





	

		

			

				
					
jquery.placeholder.js:IE下实现HTML5 input标签的placeholder属性的jQuery插件

				
			

			

				

					05-16
				

			

		

		

			
				
jquery.placeholer.js IE下实现HTML5 input标签的placeholder属性的jQuery插件 这是一个用来在IE10之前的IE浏览器下模拟HTML5 input...引入jquery.placeholder.js，在input标签中写上placeholder属性即可。 demo地址：

			
		

	





	

		

			

				
					
全兼容input/textarea标签的placeholder属性JS插件

				
			

			

				

					12-15
				

			

		

		

			
				
该插件完整兼容placeholder属性。插件由原生JS编写，无需任何其他插件支持，并且使用简单，只需一行JS调用即可。 博客地址：http://blog.csdn.net/qq_17076445/article/details/78212240

			
		

	





	

		

			

				
					
input的placeholder属性兼容ie8

				
			

			

				

					03-17
				

			

		

		

			
				
用span标签定位到placeholder位置，用jq控制span的显示和隐藏。

			
		

	





	

		

			

				
					
input中的placeholder属性

				
			

			

				

					qq_1240545777的博客
				

				

					03-19
					
					8071
					
				

			

		

		

			
				
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 &lt;input&gt; 类型：text, search, url, telephone, email 以及 password。使用：效果图：当因为用户名或密码错误，想子啊input中提示的时候，首先应该吧input....

			
		

	





	

		

			

				
					
input提升用户输入信息 当用户点击时 页面消失

				
			

			

				

					itinglight的博客
				

				

					08-20
					
					882
					
				

			

		

		

			
				
方案二
<input type="text" placeholder="请输入内容">

方案一
<input type="text" value='请输入内容' onfocus="javascript:if(this.value=='请输入内容')this.value='';">

1、js 方法添加的提示文字不同于 使用 placeholder 属性添加的效果
2、placeholder 属性添加的提示文字，只有输入内容时文字才会消失
3、js 方式添加的提示文字，当光标定位到.

			
		

	





	

		

			

				
					
input-placeholder

				
			

			

				

					sbdd6556的博客
				

				

					06-23
					
					865
					
				

			

		

		

			
				
input标签的placeholder属性的作用是：在用户输入前，做出相应的提示。
<input name="uname" type="text" placeholder="用户名"> 
placeholder属性：在用户输入前提示用户




			
		

	





	

		

			

				
					
input 标签 placeholder 属性样式修改

				
			

			

				

					KLW75
				

				

					06-24
					
					1004
					
				

			

		

		

			
				
<input type="text" placeholder="默认显示">

简单的 input 标签中，placeholder 会默认显示在标签上。如果想要修改默认的样式

可以在css样式中修改


input::placeholder {
color: pink;
}

注意，不同的浏览器可能有兼容问题。

谷歌浏览器的设置方式：


input::-webkit-input-placeholder{}



火狐浏览器的设置方式：


input::-moz-placeholder..

			
		

	





	

		

			

				
					
input标签中 placeholder 属性的进行设置

				
			

			

				

					weixin_45982960的博客
				

				

					08-06
					
					646
					
				

			

		

		

			
				
需求：改变 input 标签中提示文本内容字体的颜色，如图：



方法：CSS中有一个针对 palceholder 属性设置的样式，如下：


::-webkit-input-placeholder{
    color: red;
}






			
		

	





	

		

			

				
					
【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

				
			

			

				

					让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 
				

				

					04-19
					
					5891
					
				

			

		

		

			
				
一、HTML5 新增 input 表单属性
1、required 属性
2、placeholder 属性
3、autofocus 属性
4、autocomplete 属性
5、multiple 属性

			
		

	





	

		

			

				
					
input标签的value、placeholder、name、checked和maxlength属性

				
			

			

				

					rihjyy的博客
				

				

					02-05
					
					4130
					
				

			

		

		

			
				
input的其他属性
在昨天的的文章中，主要介绍了input标签的type属性，今天就来讲讲其他的属性：
1.value属性：
value属性的属性值是用户自定义的，用来规定input元素的默认值，例如：
用户名:<input type="text" value="请输入用户名">


但是实际运用中对于用户名和密码等可以看见的value值我们这样操作就会使用户的体验不是很好，如上图，在输入用户名的文本框中，会出现"请输入用户名"的文本，用户还得自己删掉,所以我们现在使用更多的是placehol

			
		

	





	

		

			

				
					
自定义input的placeholder属性颜色

				
			

			

				

					卜卦的博客
				

				

					05-24
					
					896
					
				

			

		

		

			
				
根据不同的浏览器有不同的写法
	    input::-webkit-input-placeholder{
            color:red;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:red;
        }
        input:-moz-...

			
		

	





	

		

			

				
					
改变input标签里placeholder样式的方法

				
			

			

				

					qq_42732038的博客
				

				

					12-01
					
					841
					
				

			

		

		

			
				
例如改变placeholder的颜色：

html部分：


<input v-model="userName"  type="text" maxlength="16" placeholder="请输入用户名">
<input v-model="passWord" type="password" placeholder="请输入密码">

css部分：


    input::-webkit-input-placeholder {
        color: #cccccc;
 

			
		

	





	

		

			

				
					
设置input 中placeholder的样式

					
最新发布

				
			

			

				

					叶落无痕的博客
				

				

					04-18
					
					1480
					
				

			

		

		

			
				
三、HTML input placeholder支持的属性。

			
		

	





	

		

			

				
					
input标签的属性

				
			

			

				

					08-26
				

			

		

		

			
				
6. placeholder属性：用于设置输入框的提示文字，在输入框为空时显示。只有type属性为text或password时才可以使用。需要注意，如果设置了value属性，placeholder的值会被覆盖。 以上是一些常见的input标签的属性，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值