使用avalon 实现一个序列号功能
avalon“操作数据即操作DOM”的能力，让我们可以专致于业务，写出更专业，更优雅，更易维护的代码来。现在让我们看看如何实现一个序列号输入功能。它的需求以下：
- 每输入4个字符就跳到下一个输入框。
- 不能输入超过4个字符。
- 支持复制贴粘功能，每4个字符自动对位到相应的输入框。
先给出代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js"></script>
<style>
input:focus{
border: 1px solid #a9ea00;
background:#f0f0f0;
}
</style>
<script>
var model = avalon.define("xxx", function(vm) {
vm.seriesNumber = [{value: ""}, {value: ""}, {value: ""}, {value: ""}]
vm.focusIndex = NaN
//获得焦点，实现输入框中的跳转操作
vm.focus = function(a, b) {
var el = this;
if (a === avalon(el).data("index")) {
setTimeout(function() {
el.focus()
el.select();
}, 0);
}
}
vm._focus = function() {
model.$unwatch()
model.focusIndex = avalon(this).data("index")
model.$watch()
} //通过贴粘实现智能输入
vm.paste = function(e) {
var index = avalon(this).data("index")
var text = ""
if (e.clipboardData) {
avalon.log("w3c")
text = e.clipboardData.getData("text/plain");
} else if (window.clipboardData) {
avalon.log("ie")
text = clipboardData.getData("Text")
}
var array = text.match(/\w{4}/g) || []
for (var i = 0; i = 4) {
model.focusIndex = index + 1 //跳转
el.value = a.slice(0, 4)
}
})
})
//刚开始时聚焦到第一个输入框中
avalon.ready(function() {
model.focusIndex = 0
}) </script>
</head>
<body>
<div ms-controller="xxx" ms-each-el="seriesNumber">
<input ms-duplex="el.value" ms-on-paste="paste" ms-focus="_focus" ms-bind="focusIndex: focus" ms-data-index="$index">
</div>
<h2>1234aaaabbbb6789</h2>
</body>
</html>
首先，我们要监听一个input里面的内容变化，马上能想到用ms-duplex，该绑定能逐字符地监听变化。但由于存在多个INPUT，为了方便循环处理，我们用到一个数组。但数组VM中只能监听它的长度变化。因此整成对象数组，然后监听这些对象的某个字符串属性就行了。
这个value值的变动，我们可以绑定$watch回调，当输入值超过4个字符串时，进行跳转操作。
el.$watch("value", function(a, b) {
if (a.length >= 4) {
model.focusIndex = index + 1 //跳转
el.value = a.slice(0, 4)
}
})
如果实现跳转操作呢，我们使用另一个新属性focusIndex 来监听，当它变化时，我们再调用一个跳转方法。而这个跳转方法需要得到元素节点。这唯有万能绑定ms-bind 能干这事。
ms-bind="vmProp:vmCallback"
vmCallback的this指向被绑定元素，并传入此绑定属性的前后两个值。vmProp的值每次变动都会调用vmCallback。
贴粘时，我们需要用到paste事件，但avalon默认没此绑定，需要用ms-on传入事件名，这里面做些兼容处理，逐一修改seriesNumber 数组对象的value 值就行了。
var model = avalon.define("xxx", function(vm) {
vm.seriesNumber = [{value: ""}, {value: ""}, {value: ""}, {value: ""}]
vm.focusIndex = NaN
//获得焦点，实现输入框中的跳转操作
vm.focus = function(a, b) {
var el = this;
if (a === avalon(el).data("index")) {
setTimeout(function() {
el.focus()
el.select();
}, 0);
}
}
vm._focus = function() {
model.$unwatch()
model.focusIndex = avalon(this).data("index")
model.$watch()
}
//通过贴粘实现智能输入
vm.paste = function(e) {
var index = avalon(this).data("index")
var text = ""
if (e.clipboardData) {
avalon.log("w3c")
text = e.clipboardData.getData("text/plain");
} else if (window.clipboardData) {
avalon.log("ie")
text = clipboardData.getData("Text")
}
var array = text.match(/\w{4}/g) || []
for (var i = 0; i = 4) {
model.focusIndex = index + 1 //跳转
el.value = a.slice(0, 4)
}
})
})
//刚开始时聚焦到第一个输入框中
avalon.ready(function() {
model.focusIndex = 0
})
fieldset input:focus{
border: 1px solid #a9ea00;
background:#f0f0f0;
}
例子
1234aaaabbbb6789
整个流程简单利落，除了跳转时我们用到一些DOM方法，其他都是对数据的操作。这与以往jQuery, Prototype.js, YUI的实现思路完全不同。打个比喻，avalon带来的技术体验，如同书法与打印机的区别。jQuery好优雅，能让你精确控制每一步DOM操作，DOM操作越是复杂，如同繁体字那样纵横捭阖，越是显得jQuery游刃有余。avalon好干净，不要准备文房四宝，一张A4，一台打印机就行了，刷刷地出来你要的东西，干脆利落，没什么人情味，但效率奇高，是工业革命的先声。从历史的发展过程来看，书法这种讲究技术，渗杂着许多人个品味地艺术被整齐划一的印刷术逼到一死角，被剥夺了文化传承者的角色。jQuery这些也一样，DOM操作最快，也比不上MVVM这种印刷机般的技术，后者能不着痕迹地同步视图，里面精密的算法保证不会存在冗余无用的DOM操作。前者还存在“糟糕的书法者”问题，最好的笔砚，在某些人手里也是潦草不堪，看守打印机工作就没这问题。从势利的角度来看，就是怎么能够给资本家带来好处，怎么在相对时间内能够有更多更快， 更稳定的产出，就怎么快被采纳，人性使然。
相关文章
使用avalon 实现一个序列号功能的更多相关文章
- OpenResty 是一个全功能的 Web 应用服务器
OpenResty (也称为 ngx_openresty)是一个全功能的 Web 应用服务器.它打包了标准的 Nginx 核心,很多的常用的第三方模块,以及它们的大多数依赖项. 通过众多进行良好设计的 ...
- php大力力 [042节] 今天做了一个删除功能
php大力力 [042节] 今天做了一个删除功能 if(isset($_GET['action'])){ if($_GET['action']=="del"){ $sql = &q ...
- 为Pythonic论坛添加一个“专题”功能（续）
上篇博文<为Pythonic论坛添加一个“专题”功能>,在模板的层次上对发帖进行了限制.也就是根据用户是否拥有权限来决定是否显示发帖框. 但是自从这么“投机取巧”的写完模板后,整夜辗转反侧 ...
- Office365开发系列——开发一个全功能的Word Add-In
2016年10月我参加了在北京举行的DevDays Asia 2016 - Office 365应用开发”48小时黑客马拉松“,我开发的一个Word Add-In Demo——WordTemplate ...
- CustomDialog——一个多功能、通用、可自定义的Dialog
CustomDialog--一个多功能.通用.可自定义的Dialog 依赖 compile 'com.github.SiberiaDante:CustomDialog:v1.0.1' 说明[Cus ...
- Spring Boot 2.2 增加了一个新功能，启动飞起~
前几天栈长分享了一个好玩的框架:一个比Spring Boot快44倍的Java框架!,是不是感觉 Spring Boot 略慢?今天讲一下 Spring Boot 添加的这个新特性,可以大大提升 Sp ...
- PHP操作实现一个多功能购物网站
PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...
- Android Studio 通过一个登录功能介绍SQLite数据库的使用
前言: SQLite简介:是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在 ...
- 项目中的一个分页功能pagination
项目中的一个分页功能pagination <script> //总页数 ; ; //分页总数量 $(function () { // $("#pagination"). ...
随机推荐
- JS 区分单击双击
var timeout =null; $("#Btn").on("click",function(){ clearTimeout(timeout);//停止单击 ...
- iOS保存数据的4种方式
在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍一下数据保存的方式: 1.NSKeyed ...
- flask第十三篇——url注意事项
先和大家说一下常用的请求方法 get:只是从服务器获取数据,不会对服务器的状态或数据产生任何影响: get方法的参数是放在URL中传递的. post:会对服务器的状态或数据产生影响:通过body形式进 ...
- matlab中矩阵式子的不成熟理解
matlab中的矩阵式的系统方式理解:一个矩阵式代表一个系统的作用,列代表输入,行代表输出,有多少列就有多少输入,有多少行就有多少输出,矩阵式的相加代表的是线性系统的叠加作用,矩阵式的相乘代表的是两个 ...
- CAS原理分析
在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁(后面的章节还会谈到锁). 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度 ...
- 2018-10-09 可用的前端 CDN
2018-10-09 可用的前端 CDN 360 前端静态资源库 https://cdn.baomitu.com/ 新浪的前端 CDN http://lib.sinaapp.com/ 又拍云的前端库慢 ...
- cookie添加中文encoding/decoding
添加时编码,读取是解码,否则编译不过 Cookie cookie=new Cookie("姓名","黄嘎兵"); respose.addCookie(cooki ...
- netstat 命令 与 ss 命令
http://www.cnblogs.com/peida/archive/2013/03/11/2953420.html http://www.ttlsa.com/linux-command/ss-r ...
- 黄聪：自定义WordPress顶部管理工具条的技巧（转）
使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php 或者插 ...
- [转载]嵌入式linux启动时运行的inittab文件
源地址:https://www.cnblogs.com/yfz0/p/5853826.html 嵌入式系统下的linux启动配置文件,不同与普通的PC linux启动配置,启动相关文件与文件的内容也要 ...