jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果


Posted in jQuery onJuly 08, 2017

页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即:

<input type="text" name="username" placeholder="请输入用户名" value="" id="username"/>

最多加点样式控制下默认文字的颜色

input::-webkit-input-placeholder{color:#AAAAAA;}

但是在低版本的浏览器却不支持这个placeholder属性,那么真的要在低版本浏览器也要实现跟placeholder一样的效果,就需要写个插件来兼容下,下面就细讲一下怎样用jquery来实现这个模拟效果。

实现这个模拟效果,页面的一般调用方式:

$('input').placeholder();

首先,先写jquery插件的一般结构:

;(function($){
  $.fn.placeholder = function(){
    //实现placeholder的代码
  }
})(jQuery)

下面我们就要判断浏览器是否支持placeholder属性。

;(function($){
  $.fn.placeholder = function(){

    this.each(function(){
      var _this = this;
      var supportPlaceholder = 'placeholder' in document.createElement('input');
      if(!supportPlaceholder){
        //不支持placeholder属性的操作

      }
    });
  }
})(jQuery)

我们要支持链式操作,如下:

;(function($){
  $.fn.placeholder = function(){

     return this.each(function(){
      var _this = this;
      var supportPlaceholder = 'placeholder' in document.createElement('input');
      if(!supportPlaceholder){
        //不支持placeholder属性的操作

      }
    });
  }
})(jQuery)

默认配置项:

options = $.extend({
  placeholderColor:'#aaaaaa',
  isSpan:false, //是否使用插入span标签模拟placeholder的方式,默认是不需要
  onInput:true //实时监听输入框
},options);

如果不需要通过span来模拟placeholder效果,那么就需要通过输入框的value值来判断,如下代码:

if(!options.isSpan){
  $(_this).focus(function () {
    var pattern = new RegExp("^" + defaultValue + "$|^$");
    pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
  }).blur(function () {
    if($(_this).val() == defaultValue) {
      $(_this).css('color', defaultColor);
    }
    else if($(_this).val().length == 0) {
      $(_this).val(defaultValue).css('color', options.placeholderColor)
    }
  }).trigger('blur');
}

如果需要同span标签来模拟placeholder效果,代码如下:

var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
$simulationSpan.css({
  'position':'absolute',
  'display':'inline-block',
  'overflow':'hidden',
  'width':$(_this).outerWidth(),
  'height':$(_this).outerHeight(),
  'color':options.placeholderColor,
  'margin-left':$(_this).css('margin-left'),
  'margin-top':$(_this).css('margin-top'),
  'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px',
  'padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,
  'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px',
  'font-size':$(_this).css('font-size'),
  'font-family':$(_this).css('font-family'),
  'font-weight':$(_this).css('font-weight')
});

//通过before把当前$simulationSpan添加到$(_this)前面,并让$(_this)聚焦
$(_this).before($simulationSpan.click(function () {
  $(_this).trigger('focus');
}));

//当前输入框聚焦文本内容不为空时,模拟span隐藏
$(_this).val().length != 0 && $simulationSpan.hide();

if (options.onInput) {
  //绑定oninput/onpropertychange事件
  var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
  $(_this).bind(inputChangeEvent, function () {
    $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
  });
}else {
  $(_this).focus(function () {
    $simulationSpan.hide();
  }).blur(function () {
    /^$/.test($(_this).val()) && $simulationSpan.show();
  });
};

整体代码

;(function($){
  $.fn.placeholder = function(options){
    options = $.extend({
      placeholderColor:'#aaaaaa',
      isSpan:false, //是否使用插入span标签模拟placeholder的方式,默认是不需要
      onInput:true //实时监听输入框
    },options);

     return this.each(function(){
      var _this = this;
      var supportPlaceholder = 'placeholder' in document.createElement('input');
      if(!supportPlaceholder){
        //不支持placeholder属性的操作
        var defaultValue = $(_this).attr('placeholder');
        var defaultColor = $(_this).css('color');
        if(!options.isSpan){
          $(_this).focus(function () {
            var pattern = new RegExp("^" + defaultValue + "$|^$");
            pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
          }).blur(function () {
            if($(_this).val() == defaultValue) {
              $(_this).css('color', defaultColor);
            }
            else if($(_this).val().length == 0) {
              $(_this).val(defaultValue).css('color', options.placeholderColor)
            }
          }).trigger('blur');
        }else{
          var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
          $simulationSpan.css({
            'position':'absolute',
            'display':'inline-block',
            'overflow':'hidden',
            'width':$(_this).outerWidth(),
            'height':$(_this).outerHeight(),
            'color':options.placeholderColor,
            'margin-left':$(_this).css('margin-left'),
            'margin-top':$(_this).css('margin-top'),
            'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px',
            'padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,
            'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px',
            'font-size':$(_this).css('font-size'),
            'font-family':$(_this).css('font-family'),
            'font-weight':$(_this).css('font-weight')
          });

          //通过before把当前$simulationSpan添加到$(_this)前面,并让$(_this)聚焦
          $(_this).before($simulationSpan.click(function () {
            $(_this).trigger('focus');
          }));

          //当前输入框聚焦文本内容不为空时,模拟span隐藏
          $(_this).val().length != 0 && $simulationSpan.hide();

          if (options.onInput) {
            //绑定oninput/onpropertychange事件
            var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
            $(_this).bind(inputChangeEvent, function () {
              $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
            });
          }else {
            $(_this).focus(function () {
              $simulationSpan.hide();
            }).blur(function () {
              /^$/.test($(_this).val()) && $simulationSpan.show();
            });
          };
        }
      }
    });
  }
})(jQuery);

调用方式,需要通过span标签来模拟的话:

$("#username").placeholder({
  isSpan:true
});

以上这篇jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 #jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 #jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 #jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
You might like
生成缩略图
2006/10/09 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python 内置函数complex详解
2016/10/23 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
使用Python函数进行模块化的实现
2019/11/15 Python
NumPy统计函数的实现方法
2020/01/21 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
廉政教育心得体会
2014/01/01 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
学校招生宣传广告词
2014/03/19 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle