JS 仿支付宝input文本输入框放大组件的实例


Posted in Javascript onNovember 14, 2017

input输入的时候可以在后边显示数字放大镜

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>JS 仿支付宝input文本输入框放大组件</title>
 <script src="js/jquery.min.js"></script>
 <style>
  * { margin: 0; padding: 0; border-width: 1px; }
  .parentCls {margin:5px 60px 0;}
  .js-max-input {border: solid 1px #ffd2b2; position:relative;background: #fffae5;padding: 0 10px 0 10px;font-size:20px;color: #ff4400}
  .inputElem4{ width: 300px; height: 36px; border: 1px solid #E0E0E0; padding-left: 10px; line-height: 36px; font-size: 14px; }
 </style>
 </head>
 <body>
 <div class="parentCls">
  <input type="text" class="inputElem4" autocomplete = "off" maxlength="18"/>
 </div>
  <script src="js/jq22.js"></script>
  <script>
   // 初始化
   $(function(){
   new TextMagnifier({
    inputElem: '.inputElem4',
    align: 'bottom',
    splitType: [6,4,4,4]
   });
   });
  </script>
 </body>
</html>
/**
 * JS 仿支付宝的文本输入框放大组件
 */ 


 function TextMagnifier(options) {

  this.config = {
  
  inputElem   :  '.inputElem',  // 输入框目标元素
  parentCls   :  '.parentCls',  // 目标元素的父类
  align    :  'right',   // 对齐方式有 ['top','bottom','left','right']四种 默认为top
  splitType   :  [3,4,4],   // 拆分规则
  delimiter   :  '-'    // 分隔符可自定义
  };

  this.cache = {
   isFlag : false
  };
  this.init(options);
 }

 TextMagnifier.prototype = {
  
  constructor: TextMagnifier,

  init: function(options) {
  this.config = $.extend(this.config,options || {});
  var self = this,
   _config = self.config,
   _cache = self.cache;
  
  self._bindEnv();
  
  
  },
  /*
  * 在body后动态添加HTML内容
  * @method _appendHTML
  */
  _appendHTML: function($this,value) {
   var self = this,
    _config = self.config,
    _cache = self.cache;

   var html = '',
    $parent = $($this).closest(_config.parentCls);

    if($('.js-max-input',$parent).length == 0) {
    html += '<div class="js-max-input"></div>';
    $($parent).append(html);
    }
    var value = self._formatStr(value);
    $('.js-max-input',$parent).html(value);
  },
  /*
  * 给目标元素定位
  * @method _position
  * @param target
  */
  _position: function(target){
  var self = this,
   _config = self.config;
  var elemWidth = $(target).outerWidth(),
   elemHeight = $(target).outerHeight(),
   elemParent = $(target).closest(_config.parentCls),
   containerHeight = $('.js-max-input',elemParent).outerHeight(); 
  
  $(elemParent).css({"position":'relative'});
  
  switch(true){
   
   case _config.align == 'top':
    
    $('.js-max-input',elemParent).css({'position':'absolute','top' :-elemHeight - containerHeight/2,'left':0});
    break;
   
   case _config.align == 'left':

    $('.js-max-input',elemParent).css({'position':'absolute','top' :0,'left':0});
    break;
   
   case _config.align == 'bottom':

    $('.js-max-input',elemParent).css({'position':'absolute','top' :elemHeight + 4 + 'px','left':0});
    break;
   
   case _config.align == 'right':

    $('.js-max-input',elemParent).css({'position':'absolute','top' :0,'left':elemWidth + 2 + 'px'});
    break;
  }
  },
  /**
  * 绑定事件
  * @method _bindEnv
  */
  _bindEnv: function(){
  var self = this,
   _config = self.config,
   _cache = self.cache;

  // 实时监听输入框值的变化
  $(_config.inputElem).each(function(index,item){

   $(item).keyup(function(e){
    var value = $.trim(e.target.value),
     parent = $(this).closest(_config.parentCls);
    if(value == '') {
     self._hide(parent);
    }else {

     var html = $.trim($('.js-max-input',parent).html());

     if(html != '') {
      self._show(parent);
     }
    }
    self._appendHTML($(this),value);
    self._position($(this));
   });

   $(item).unbind('focusin');
   $(item).bind('focusin',function(){
    var parent = $(this).closest(_config.parentCls),
     html = $.trim($('.js-max-input',parent).html());

    if(html != '') {
     self._show(parent);
    }
   });

   $(item).unbind('focusout');
   $(item).bind('focusout',function(){
    var parent = $(this).closest(_config.parentCls);
    self._hide(parent);
   });
  });
  },
  /**
  * 格式化下
  * @method _formatStr
  */
  _formatStr: function(str){
  var self = this,
   _config = self.config,
   _cache = self.cache;
  var count = 0,
   output = [];
  for(var i = 0, ilen = _config.splitType.length; i < ilen; i++){
   var s = str.substr(count,_config.splitType[i]);
   if(s.length > 0){
    output.push(s);
   }
   count+= _config.splitType[i];
  }
  return output.join(_config.delimiter);
  },
  /*
  * 显示 放大容器
  * @method _show
  */
  _show: function(parent) {
  var self = this,
   _config = self.config,
   _cache = self.cache;
  if(!_cache.isFlag) {
   $('.js-max-input',parent).show();
   _cache.isFlag = true;
  }
  },
  /*
  * 隐藏 放大容器
  * @method hide
  * {public}
  */
  _hide: function(parent) {
  var self = this,
   _config = self.config,
   _cache = self.cache;
  if(_cache.isFlag) {
   $('.js-max-input',parent).hide();
   _cache.isFlag = false;
  }
  }
 };

效果图

JS 仿支付宝input文本输入框放大组件的实例

以上这篇JS 仿支付宝input文本输入框放大组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 #Javascript
vue router使用query和params传参的使用和区别
Nov 13 #Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 #Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
Angular实现表单验证功能
Nov 13 #Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 #Javascript
Vue.js用法详解
Nov 13 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python深入06——python的内存管理详解
2016/12/07 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
出国导师推荐信
2014/01/16 职场文书
幼儿园小班评语
2014/04/18 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
企业工会工作总结2015
2015/05/13 职场文书