首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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文本输入框放大组件的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

一梦_浮生

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 性能优化指南（2）
May 21 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
javascript学习笔记（五）原型和原型链详解
Oct 08 Javascript
js打造数组转json函数
Jan 14 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
详解vue高级特性
Jun 09 Javascript
JavaScript原型链详解
Nov 07 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
html5+(1) 虚拟机(3) 磁盘管理(1) 目录管理(1) plus.io(1) RabbitMQ(3) Hash(1) Vmware(3) 入门基础(1) 触发器(3)
You might like
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
Node.js（安装，启动，测试）
2014/06/09 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JQuery select（下拉框）操作方法汇总
2015/04/15 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
2016/09/19 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
python中map()与zip()操作方法
2016/02/27 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python中base64与xml取值结合问题
2019/12/22 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
生产工厂门卫岗位职责
2014/09/26 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
施工安全责任协议书
2016/03/23 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server