zoukankan      html  css  js  c++  java
  • placeholder 兼容 IE

    placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF、Chrome、Safari、Opera 以及 IE10 都支持,IE6-IE9 都不支持!

    placeholder 在各个浏览器下基本都是淡灰色显示,不同的地方在于 FF 和 Chrome 中,输入框获得焦点时,placeholder 文字没有变化,只有当输入框中输入了内容时,placeholder 文字才会消失;而在 Safari 和 IE10 下,当输入框获得焦点时,placeholder 文字便立即消失。

    js 解决方法:

    if( !("placeholder" in document.createElement("input")) ){   
        $("input[placeholder],textarea[placeholder]").each(function(){
            var that = $(this),
                text= that.attr("placeholder");
            if(that.val()===""){
                that.val(text).addClass("placeholder");
            }
            that.focus(function(){
                if(that.val()===text){
                    that.val("").removeClass("placeholder");
                }
            })
            .blur(function(){
                if(that.val()===""){
                    that.val(text).addClass("placeholder");
                }
            })
            .closest("form").submit(function(){
                if(that.val() === text){
                    that.val("");
                }
            });
        });
    }

     在页面里引入 jquery,再执行上面这段代码即可!

    例子:

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>placeholder兼容</title>
        </head>
    
        <body>
            <input type="text" placeholder="我是提示文字">

    <!-- 这里 src 改成你自己的 jquery 路径 --> <script type="text/javascript" src="../scripts/common/jquery-1.8.3.min.js"></script>
    <script type="text/javascript"> $(function() { if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholder]').each(function(){ var that = $(this), text= that.attr('placeholder'); if(that.val()===""){ that.val(text).addClass('placeholder'); } that.focus(function(){ if(that.val()===text){ that.val("").removeClass('placeholder'); } }) .blur(function(){ if(that.val()===""){ that.val(text).addClass('placeholder'); } }) .closest('form').submit(function(){ if(that.val() === text){ that.val(''); } }); }); } }); </script> </body> </html>

    到此,placeholder 兼容问题已解决!

  • 相关阅读:
    端口监听与telnet
    strace
    Java Web SSH框架总是无法写入无法读取Cookie
    很反感Java Web 三层框架
    关于武侠游戏的一些想法(长期整理)
    奇怪的Lisp和难懂的计算机程序的构造和解释
    编程的智慧(转自王垠个人博客)——满满的编程实践经验不看就错过
    最近买了个Mac Pro,用起来感觉是去年买了个表
    Python手动构造Cookie模拟登录后获取网站页面内容
    奇怪的JS正则之 /[A-z]/.test("\"); // true
  • 原文地址:https://www.cnblogs.com/lpbottle/p/placeholder.html
Copyright © 2011-2022 走看看