MVVM架构~knockoutjs系列之文本框数符长度动态统计功能
2014-05-08 14:42
295 查看
返回目录
这个功能为什么要写呢,因为在之前做了一个前端的页面效果,使用JS写的,感觉很累,真的,对于一个文本框长度动态统计,你要写blur,press,down什么的事件,太麻烦了,这时,我想到了knockoutjs,这东西好,为什么,是因为它够简单,够强大,这两点对于程序员来说,就是好!
当字数达到某个值时,如10个字,这时文本框将不允许你再次输入,这使用了subscribe,而长度与文框关的关联使用了computed(dependentObservable依赖监视器也是可以的),而何时去触发事件使用了valueUpdate属性afterkeydown属性值表示当键盘被按下时触发.
JS代码
返回目录
这个功能为什么要写呢,因为在之前做了一个前端的页面效果,使用JS写的,感觉很累,真的,对于一个文本框长度动态统计,你要写blur,press,down什么的事件,太麻烦了,这时,我想到了knockoutjs,这东西好,为什么,是因为它够简单,够强大,这两点对于程序员来说,就是好!
先来看一下页面的效果
当字数达到某个值时,如10个字,这时文本框将不允许你再次输入,这使用了subscribe,而长度与文框关的关联使用了computed(dependentObservable依赖监视器也是可以的),而何时去触发事件使用了valueUpdate属性afterkeydown属性值表示当键盘被按下时触发.
下面看一下实现的原代码
HTML代码<input type="text" data-bind="value:count,valueUpdate: 'afterkeydown'" /> <span data-bind="text:countLen"></span>/10 <span style="color: red;" data-bind="validationMessage:count"></span>
JS代码
/*computed valueUpdate等属性的学习*/ self.count = ko.observable().extend({ maxLength: { params: 10, message: "最大长度为10" }, required: { params: true, message: "请输入字符..." } }); self.count.subscribe(function (o) {//实现当大于某个长度时,只绑定指定长度的字符 if (o.length > 10) self.count(o.substr(0, 10)); }); self.countLen = ko.computed(function () { return self.count() ? self.count().trim().length : 0; });
返回目录
相关文章推荐
- MVVM架构~Knockoutjs系列之验证机制的引入
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
- MVVM架构~knockoutjs系列之数组的$index和$data
- MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
- MVVM架构~Knockoutjs系列之对象与对象组合
- MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
- MVVM架构~Knockoutjs系列之验证机制的引入
- MVVM架构~Knockoutjs系列之js接收C#数据集合的方式
- MVVM架构~knockoutjs系列之验证信息自定义输出
- MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength
- MVVM架构~knockoutjs系列之验证信息自定义输出~再续
- MVVM架构~knockoutjs系列之为Ajax传递Ko数组对象
- MVVM架构~knockoutjs系列之正则表达式使规则更灵活
- MVVM架构~knockoutjs系列之验证成功提示显示
- MVVM架构~knockoutjs系列之验证成功提示显示
- MVVM架构~knockoutjs系列之包括区域级联列表的增删改
- MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放