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实现简单的计时器功能实例分析
Aug 29 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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.ini中的request_order推荐设置
2015/05/10 PHP
php微信公众号开发模式详解
2016/11/28 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
优秀求职自荐信怎样写
2013/12/18 职场文书
驾驶员岗位职责
2014/01/29 职场文书
学生手册家长评语
2014/02/10 职场文书
董事长助理岗位职责
2014/02/18 职场文书
班级旅游计划书
2014/05/03 职场文书
求职信名称怎么写
2014/05/26 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
党员民主评议自我评价
2014/10/20 职场文书
实习单位证明范例
2014/11/17 职场文书
销售会议开幕词
2015/01/28 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
技术入股合作协议书
2016/03/21 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
Linux安装apache服务器的配置过程
2021/11/27 Servers