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实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Angular 容器部署的方法
2018/04/17 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python实现文字版扫雷
2020/04/24 Python
python批量修改交换机密码的示例
2020/09/22 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
代收款委托书范本
2014/10/01 职场文书
运动会开幕词
2015/01/28 职场文书
化妆品促销活动总结
2015/05/07 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
使用Redis实现实时排行榜功能
2021/07/02 Redis