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 19 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
Zend Guard一些常见问题解答
2008/09/11 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
php格式文件打开的四种方法
2018/02/24 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
php文件包含的几种方式总结
2019/09/19 PHP
Prototype的Class.create函数解析
2011/09/22 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
AngularJS内置指令
2015/02/04 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
python实现飞船大战
2020/04/24 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
什么是会话Bean
2015/05/14 面试题
上级检查欢迎词
2014/01/18 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
聘任通知书
2015/09/21 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
python APScheduler执行定时任务介绍
2022/04/19 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL