zoukankan      html  css  js  c++  java
  • IE如何兼容placeholder属性

    HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现:

    <input id="t1" type="text" placeholder="请输入文字" />

    由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问)

    function hasPlaceholderSupport() { 
          return 'placeholder' in document.createElement('input'); 
    
    
    }
    View Code

    默认提示文字是灰色的,可以通过CSS来改变文字样式:


    /*all*/
    ::-webkit-input-placeholder { color:#f00; }input:-moz-placeholder { color:#f00; }/* individual: webkit */#field2::-webkit-input-placeholder { color:#00f; }#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }/* individual: mozilla */#field2:-moz-placeholder { color:#00f; }#field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
     

    兼容其他不支持placeholder的浏览器:

    介绍一个超强的让IE下支持placeholder的属性插件,代码如下:

     $(document).ready(function(){   
       var doc=document,
        inputs=doc.getElementsByTagName('input'),
        supportPlaceholder='placeholder'in doc.createElement('input'),
        
        placeholder=function(input){
         var text=input.getAttribute('placeholder'),
         defaultValue=input.defaultValue;
         if(defaultValue==''){
            input.value=text
         }
         input.onfocus=function(){
            if(input.value===text)
            {
                this.value=''
            }
          };
         input.onblur=function(){
            if(input.value===''){
                this.value=text
            }
          }
      };
      
      if(!supportPlaceholder){
         for(var i=0,len=inputs.length;i<len;i++){
              var input=inputs[i],
              text=input.getAttribute('placeholder');
              if(input.type==='text'&&text){
                 placeholder(input)
              }
          }
      }
     });
    View Code
  • 相关阅读:
    Struts2的原理,配置和使用
    tomcat启动异常之----A child container failed during start
    Oracle两表关联更新其中一张表的数据
    jsp隐藏字符串中间部分信息,只显示前后字段
    浏览器会缓存js文件
    tomcat启动项目很快,且不报错,访问报404,项目实际上没起来,起的是空tomcat
    jd-eclipse插件的安装
    Junit4使用总结
    json中dump()与dumps()里的参数解释
    python时间函数和常用格式化
  • 原文地址:https://www.cnblogs.com/myloveblogs/p/5502887.html
Copyright © 2011-2022 走看看