JS 仿支付宝input文本输入框放大组件
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文本输入框放大组件的更多相关文章
- Text input(文本输入框)
Text input(文本输入框)是用来获得用户输入的绝佳方式. 你可以用如下方法创建: <input type="text"> 注意,input元素是自关闭的.
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...
- html禁止文本输入框记录输入记录,单击input出现输入过的记录
其实方法很简单,只需要在input文本输入框中加一条autocomplete="off"属性即可. <input type="text" name=&qu ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- [js开源组件开发]js文本框计数组件
js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- 仿支付宝/微信的password输入框效果GridPasswordView解析
仿支付宝/微信的password输入框效果GridPasswordView解析,把一些设置和一些关键的地方列了出来,方便大家使用,可能能够省一部分的时间,也算是自己的积累吧. 1.password框能 ...
- 文本输入框input将输入转换为统一大小写
转载地址:http://blog.csdn.net/yieryi_/article/details/52078596 文本输入框input将输入转换为统一大小写,通常有两种方法:JS和CSS方法. 1 ...
- HTML中<input>參数,以及文本输入框,文本域的解说
<form> <input type="text/password" name="名称" value="文本" /> ...
随机推荐
- LeetCode 278. 第一个错误的版本(First Bad Version)
278. 第一个错误的版本 LeetCode278. First Bad Version 题目描述 你是产品经理,目前正在带领一个团队开发新的产品.不幸的是,你的产品的最新版本没有通过质量检测.由于每 ...
- 027 Android 可扩展的listview:ExpandableListView的使用案例
1.ExpandableListView简介 ExpandableListView是一种用于垂直滚动展示两级列表的视图,和 ListView 的不同之处就是它可以展示两级列表,分组可以单独展开显示子选 ...
- [WCF] - 使用 bat 批处理文件将 WCF 服务部署为 Windows Service
1. 添加 Windows Service 项目 2. 添加 WCF 项目引用 3. 更新 App.config 配置文件(可以从 WCF的 Web.config 拷贝过来),设置服务地址. 4. 配 ...
- 接口中的方法都自动的被设置为public,接口中的域被自动设置为public static final
接口中的方法都自动的被设置为public,接口中的域被自动设置为public static final
- Java架构笔记:用JWT对SpringCloud进行认证和鉴权
写在前面 喜欢的朋友可以关注下专栏:Java架构技术进阶.里面有大量batj面试题集锦,还有各种技术分享,如有好文章也欢迎投稿哦. image.png JWT(JSON WEB TOKEN)是基于RF ...
- SQL Server邮件标识点
<br>---换行  :---空格 <H1></H1>---标题 --定义表格格式 N'<table border="1" ...
- elk docker-compose
version: '3.1' services: elasticsearch: image: docker.elastic.co/elasticsearch/elasticsearch:6.2.4 c ...
- MySQL中You can't specify target table '表名'('sn_app_label') for update in FROM clause错误解决办法
在有些时候有级联关系的数据放在了同一张表中,在写sql语句的时候可能会遇到这样的场景:我要插入两条数据,第一条是父节点,第二条是子节点,关联关系是父节点的自增长id:在写这样的sql语句时有可能就会出 ...
- 海量数据处理的 Top K 相关问题
Top-k的最小堆解决方法 问题描述:有N(N>>10000)个整数,求出其中的前K个最大的数.(称作Top k或者Top 10) 问题分析:由于(1)输入的大量数据:(2)只要前K个,对 ...
- py-2 python介绍与安装
一.python介绍 1.python背景 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Py ...