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

最新推荐文章于 2021-06-21 08:21:35 发布

原创最新推荐文章于 2021-06-21 08:21:35 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

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

15 篇文章

订阅专栏

本文提供了一段jQuery代码，用于在不支持placeholder属性的老浏览器中实现提示文本的效果。通过克隆原始输入框并设置样式及事件监听，确保用户体验不受影响。

直接上代码，需要引入 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显示
        });
    }
});