关于html5标签PlaceHolder 兼容IE8，IE9浏览器

最新推荐文章于 2018-09-05 10:24:14 发布
最新推荐文章于 2018-09-05 10:24:14 发布
阅读量1k 收藏
点赞数
文章标签： placeholder html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011984596/article/details/43267005
版权 
(function($) {
    $.fn.PlaceHolder = function(className) {
        var _set = function($em, opt) {
            for (i in opt) {
                switch(i) {
                    case 'value': $em.val(opt[i]); break;
                    case 'class':
                        if (opt[i].length) {
                            $em.toggleClass(opt[i]);
                        }
                        break;
                    default: $em.attr(i, opt[i]);
                }
            }
        };
         
        if ('placeholder' in $('<input />')[0]) {
            return this;
        }
         
        return this.each(function() {
            var $this = $(this), 
                init = {
                    'type': $this.attr('type'),
                    'placeholder': $this.attr('placeholder')
                };
             
            $this.bind({
                'init': function(){
                    _set($(this), {
                        'type': init.type,
                        'class': className ? className : '',
                        'value': ''
                    });
                },
                 
                'opts': function() {
                    _set($(this), {
                        'type': 'text',
                        'class': className ? className : '',
                        'value': init.placeholder
                    });
                },
                 
                'focus': function() {
                    var $this = $(this);
                    if ($this.val() == init.placeholder) {
                        $this.trigger('init');
                    }
                },
                 
                'blur': function() {
                    var $this = $(this);
                    if ($this.val() == '') {
                        $this.trigger('opts');
                    }
                }
            });
             
            if (init.placeholder && $this[0].value != undefined) {
                $this.trigger('blur');
            }
        });
    };
})(jQuery);
<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title></title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/my.js" type="text/javascript"></script>
	<style type="text/css">
	.abc{
	 color: #aca9a9;
	 padding: 3px;
	}
	</style>
	<script type="text/javascript">
	$(function() {
        $('#tmp').PlaceHolder('abc');
    })
	
	</script>
  </head>
  
  <body>
  <input  placeholder="测试一下" id="tmp"/>
    
  </body>
</html>


 


                

        

        

    




    

      

        

            

              
                
                  黄天霸a
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
IE9版本的浏览器对placeholder的兼容,封装函数

				
			

			

				

					m0_53328982的博客
				

				

					08-12
					
					102
					
				

			

		

		

			
				
**
IE9版本的浏览器对placeholder的兼容,封装函数
**
// IE9版本的浏览器对placeholder的兼容,封装函数，需要的时候直接在页面调用
// placeholder(".ipt")  .ipt是input框的class名

import $ from 'jquery'

let placeholder=(target)=>{
  $(target).val($(target).attr("datavalue")).addClass("inp");
  $(target).f

			
		

	



                

              
                



	

		

			

				
					
placeholder兼容IE8解决方案

				
			

			

				

					fb_01的专栏
				

				

					12-11
					
					1万+
					
				

			

		

		

			
				
1、原因：placeholder是h5的新属性，老版本的IE浏览器不支持此属性。
2、解决方法：jQuery三方插件  jquery-placeholder
3、快速开始：



	test
	
	


	input{
		width: 100px;
		height: 50px;
		border: 1px solid red;
	}
	.placeholder

			
		

	



                


  
              

                


	

		

			

				
					
placeholder的兼容处理(jQuery下)

				
			

			

				

					ajb11683的博客
				

				

					12-21
					
					123
					
				

			

		

		

			
				
　　这是一个老问题，结合前辈们的经验，需要处理的问题有一下几个。
　　1.只有输入框（input/textarea）下的palaceholder属性存在的时候才需要处理这类兼容
　　2.处理好输入框上焦点和是焦点的文本显示
　　3.密码输入框比较特殊，因为为其设置显示文本时显示的是一串“***”。这个问题后面分析。处理好前两点还是比较简单的，处理源码为如下

var brows...

			
		

	





	

		

			

				
					
简单实现IE9及以下对placeholder的兼容性

					
热门推荐

				
			

			

				

					樊小书生
				

				

					08-20
					
					1万+
					
				

			

		

		

			
				
placeholder属性的出现使input输入框不再单调，而且可以对用户做一个对输入内容的提醒或者指引，起到了很好的作用。但是 但是IE9及IE9以下不支持这个属性，这就让人很恼火呀，毕竟中国还有好多人用的是IE9及以下浏览器/(ㄒoㄒ)/~~。

			
		

	



		

			
		



	

		

			

				
					
HTML5 Placeholder type="password" jQuery Plugin – Final Solution

				
			

			

				

					weixin_33690963的博客
				

				

					06-08
					
					73
					
				

			

		

		

			
				
placeholder 是HTML5的新屬性，在做input 的預設值還蠻方便的，但無奈IE8以下不支援，因此需要額外做fix。在實際應用中，卻愈到了很多問題：
例如在官網查到的plugin：http://plugins.jquery.com/project/input-placeholder，就不支援type="password"的結果。因為僅改變value，對於pass...

			
		

	





	

		

			

				
					
placeholder浏览器兼容（ie9以上）解决方案

				
			

			

				

					weixin_34174105的博客
				

				

					09-28
					
					164
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
Html5的placeholder属性(IE兼容)实现代码

				
			

			

				

					12-09
				

			

		

		

			
				
总的来说，HTML5的`placeholder`属性大大提高了用户体验，而通过JavaScript实现的兼容性解决方案则确保了在旧版浏览器中的良好表现。然而，对于大型项目，可能还需要考虑性能优化和更复杂的交互逻辑，确保在各种情况...

			
		

	





	

		

			

				
					
ie6 7 8兼容html5属性placeholder

				
			

			

				

					11-27
				

			

		

		

			
				
总结起来，为了让IE6、7、8兼容HTML5的`placeholder`属性，可以采用以下步骤：  1. 使用jQuery插件（如`jquery.placeholder.js`）或编写JavaScript代码来模拟`placeholder`行为。 2. 为不支持`placeholder`的浏览器...

			
		

	





	

		

			

				
					
IE7 浏览器处理 兼容 input placeholder.zip

				
			

			

				

					01-19
				

			

		

		

			
				
在前端开发中，IE7浏览器的兼容性问题一直是一个挑战，特别是对于HTML5新特性，如`input`元素的`placeholder`属性。`placeholder`属性允许我们在输入框中设置提示文字，当用户聚焦输入框时，提示文字会自动消失。...

			
		

	





	

		

			

				
					
bootstrap3 兼容IE8浏览器！

				
			

			

				

					11-25
				

			

		

		

			
				
标题提到的"bootstrap3 兼容IE8浏览器！"是一个关键问题，因为Bootstrap 3虽然设计为高度适应现代浏览器，但对老版本的Internet Explorer（尤其是IE8）的支持是有限的。以下是关于Bootstrap 3在IE8中实现兼容性的...

			
		

	





	

		

			

				
					
Ie9以下的input输入框placeholder属性兼容方案

				
			

			

				

					qq_28307565的博客
				

				

					06-20
					
					567
					
				

			

		

		

			
				
.placeholder{ color:#999;}
 



//   兼容ie9的placeholder
function isPlaceholder(){
    var input = document.createElement('input');
    return 'placeholder' in input;
}
if (!isPlaceholder()) {

			
		

	





	

		

			

				
					
解决IE不支持HTML5表单属性placeholder的问题

				
			

			

				

					qq_17748411的博客
				

				

					09-05
					
					154
					
				

			

		

		

			
				
define(function (require, exports, module) {

//解决IE不支持HTML5表单属性placeholder的问题

(function ($) {

$.fn.placeholder = function (options) {

var defaults = {

pColor: "#ccc",

pActive: "#999",

pFont: "1...

			
		

	





	

		

			

				
					
IE8可以兼容HTML5的标签

				
			

			

				

					EathonZ的博客
				

				

					09-26
					
					1855
					
				

			

		

		

			
				
1.这是第一个

(function(e,t){function n(e,t){var n=e.createElement("p"),i=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x"+t+"",i.insertBefore(n.lastChild,i.firstChild)}functio

			
		

	





	

		

			

				
					
解决IE8不兼容HTML5标签的方法

				
			

			

				

					一个IT男的Blog
				

				

					06-29
					
					5567
					
				

			

		

		

			
				
方法一 ：使用Google的html5shiv包<head>
<!--[if lt IE9]> 
    <script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
<!-- ... -->
</head>/*记得css初始化一下标签*/
article,aside,dialog,foo

			
		

	





	

		

			

				
					
html5 placeholder ie8,9 input框中不显示默认值

				
			

			

				

					xiaoluyouyue的博客
				

				

					10-24
					
					389
					
				

			

		

		

			
				

 1,第一种方法
 function setDefaultvalueInie(){
    if($.isFunction($.fn.placeholder)){
       $('[placeholder]').each(function(){
       if($(this).val() == '') {
             $(this).val($(this).at...

			
		

	





	

		

			

				
					
在IE9中实现placeholder功能

				
			

			

				

					justforuse的博客
				

				

					05-07
					
					1万+
					
				

			

		

		

			
				
placeholder是文本框用来提示内容的属性，比如：<input id="txt" type="text" name="account" placeholder="请输入帐号">会显示为： 
 
然而IE9不支持此属性，可以使用js来简单模拟placeholder行为。我的基本思路是为输入框设置value值，并设置字体颜色，根据输入框内容模拟placeholder。对于密码输入框placehol

			
		

	





	

		

			

				
					
placeholder兼容浏览器的解决方案

				
			

			

				

					小记心得
				

				

					10-14
					
					1万+
					
				

			

		

		

			
				
关于placeholder的使用，众所周知它是h5的新属性，所以IE9以下就别想用它了，不支持。
那么我们必须要低版本的浏览器，做一些降级处理的兼容，原理自然就是：提示语placeholder用其他方式替代显示咯。
以下是一小段兼容处理。
代码如下：



    
    welcome to ixiewei world
    
        body{font:12px/1.5 "

			
		

	





	

		

			

				
					
关于input标签和placeholder在IE8，9下的兼容问题

				
			

			

				

					supershuyun的博客
				

				

					05-18
					
					577
					
				

			

		

		

			
				
　一、

　　input常用在表单的输入，包括text，password，H5后又新增了许多type属性值，如url, email, member等等，考虑到非现代浏览器的兼容性问题，这些新的type常用在移动端的项目中。

　　二、

　　IE10+浏览器下，input标签会有一个默认的样式，比如文本框的‘×’号，密码框的小眼睛。初衷是好的，有时候很方便，但有时候我们会自己设置样式和功能。可以用...

			
		

	





	

		

			

				
					
解决ie9以下input 无placeholder问题

				
			

			

				

					菜鸟史
				

				

					03-02
					
					5138
					
				

			

		

		

			
				
1，首先判断浏览器是否支持placeholder属性，如果不支持则使用模拟placeholder　　//判断是否支持placeholder属性　　function isPlaceholer(){　　var input = document.createElement(‘input’);
　　return “placeholder” in input;　　}


2，引入js 。添加如下代码

			
		

	





	

		

			

				
					
HTML5新手入门教程：新特性与浏览器支持解析

				
			

			

				

					
				

			

		

		

			
				
即使是 Internet Explorer 9 也开始支持部分 HTML5 功能，尽管早期版本的 IE 对 HTML5 支持有限。  总结起来，HTML5 是一个革命性的标准，它不仅简化了网页开发，还为用户提供了一致且丰富的浏览体验。随着 HTML5 ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值