IE10 以下版本完美支持 placeholder 特性

luofeng0710

于 2015-01-23 09:51:31 发布

阅读量4.3k

点赞数 1

分类专栏： js代码片段

本文链接：https://blog.csdn.net/luofeng0710/article/details/43051647

版权

js代码片段专栏收录该内容

15 篇文章 0 订阅

订阅专栏

直接上代码，需要引入 Jquery

$(function () {
    //浏览器不支持 placeholder 时才执行
    if (!('placeholder' in document.createElement('input'))) {
        $('[placeholder]').each(function () {
            var $tag = $(this); //当前 input
            var $copy = $tag.clone();   //当前 input 的复制
            if ($copy.val() == "") {
                $copy.css("color", "#999");
                $copy.val($copy.attr('placeholder'));
            }
            $copy.focus(function () {
                if (this.value == $copy.attr('placeholder')) {
                    this.value = '';
                    this.style.color = '#000';
                }
            });
            $copy.blur(function () {
                if (this.value=="") {
                    this.value = $copy.attr('placeholder');
                    $tag.val("");
                    this.style.color = '#999';
                } else {
                    $tag.val(this.value);
                }
            });
            $tag.hide().after($copy.show());    //当前 input 隐藏 ，具有 placeholder 功能js的input显示
        });
    }
});