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
  • 相关阅读:
    Sublime Text 3下载安装以及安装HTML-CSS-JS Prettify代码格式化插件
    eclipse升级Android SDK Tool版本到25.2.5后运行项目报错Unable to build: the file dx.jar was not loaded from the SDK folder
    MySQL字符集与排序规则总结
    windows版mysql安装
    maven 引入qrcode.jar
    Java Web 项目目录规范
    JAVA WEB项目目录结构以及web应用部署的根目录,编译路径和项目根目录的区别
    java实现二维码的生成和解读
    <![CDATA[]]>和转义字符
    jvm参数调优
  • 原文地址:https://www.cnblogs.com/myloveblogs/p/5502887.html
Copyright © 2011-2022 走看看