也谈placeHolder占位符

最新推荐文章于 2020-10-28 15:51:13 发布

蕲雁

最新推荐文章于 2020-10-28 15:51:13 发布

阅读量725

点赞数

分类专栏： javascript 文章标签： function jquery ie 360

本文链接：https://blog.csdn.net/zjanhoo/article/details/8033578

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天用FF浏览网站，发现360网站首页中探索栏输入框处用了placeHolder属性（PS：本人不是写软文，只是爱好前端技术而已），在IE中打开看了一下，体验还行，于是就想写一段代码来实现这个功能。好了，不多说，直接贴代码。

(function($){
    $.fn.placeHolder = function(options){
        var _self = $(this);

        _self.css('color', '#666').focus(function(){
            $(this).css('color', '#000');
        }).blur(function(){
            $(this).css('color', '#666');
        });

        if ($.browser.msie) {
            _self.val(options.placeholder).focus(function(){
                var val = $.trim($(this).val());
                if(val == options.placeholder) {
                    $(this).val('');
                }
            }).blur(function(){
                var val = $.trim($(this).val());
                if(val == '') {
                    $(this).val(options.placeholder);
                }
            });
        } else {
            _self.attr('placeholder', options.placeholder);
        }
    }
})(jQuery);

把以上代码保存成placeholder.js，在要用到的页面引用jquery.js和placeholder.js，然后在$(function(){})里面调用。调用方法是jQuery对象.placeHolder({placeholder: '用户名'});

呵呵，第一次写技术博客，有点啰嗦，。