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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
JS与C#编码解码
Dec 03 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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中的一个中文字符串截取函数
2007/02/14 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
js实现简单放大镜效果
2020/03/07 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python实现把数字转换成中文
2015/06/29 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
品质管理部岗位职责范文
2014/03/01 职场文书
网络宣传方案
2014/03/15 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
企业宗旨标语
2014/06/10 职场文书
项目申请汇报材料
2014/08/16 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
优秀教研组申报材料
2014/12/26 职场文书
师范生教育见习总结
2015/06/23 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS