返回目录

这个功能为什么要写呢,因为在之前做了一个前端的页面效果,使用JS写的,感觉很累,真的,对于一个文本框长度动态统计,你要写blur,press,down什么的事件,太麻烦了,这时,我想到了knockoutjs,这东西好,为什么,是因为它够简单,够强大,这两点对于程序员来说,就是好!

先来看一下页面的效果

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALUAAAAqCAIAAAB6AY1oAAACcUlEQVR4nO2ZzXXrIBBGpwuVoQVFuAo2LNKBimBDCamBDRWkBW3ogC7IAiHzp7H9Yj/FOd9d5TgCdPJdDwOhCMAxdPYLgF8N/AAc8ANwwA/AAT8AB/wAHPADcNAHeAfO9OOstcGdwA/AAT8AB/wAHPADcMAPwAE/AAf8ABx1RkHNE9Uo7crnjRRCmvSzt4aIjPXlA06rPFRUv+iAH28Ak1FY3dRm7AWRsT6sbveo9MNbs2thpJhmFY6XHvuRpm6ki3lGIiKa3MpMy5GMvmku2GH8KEtFwltTRx7UPBVRBjVPe70Jq5vYKA/rh9Oq98Nb05SyfyWo+QI/7uTYDy+6dI0UdUaNH82QrdgcLf2wH8xcjwA/HuAoo65UDOtB5Uf3QGNPC+eHlLLYvaq2yFif1COa3Poltv0ifSKsNUSUXr1ohaiucqUfaWC7U4LEQUbVTpFwWjXbzQv9SCuF1c1Z0qZ+hNVdpIkxOr3kJcMilxC9zG/5ZW0YbEyVH/u0YXXLc/avP8Vxj9j0cMOwX76/pMhjHOwvKeag9Sfz3rtG3cArqe3t3AcxHvgx7ExHXf/N/pQ7KNz2o0y37z+8NYvWn8XyqX6I66r+spWfUqPKD6e1z7NBkZ5RRoPvfdeZJtqi4rQqz7f8H5zxY5m3hmMrR/lk2xxNr9UltxHXRsRXo7ZrnHy+HX+C/qOnz8hp1d1btGeZ8v6juUbbQ7n5bfz5/ZjX6BhezD0ZjYx5Aj/yw0iBa67/wB0ZDc4yTwH3628A/j8HOOAH4IAfgAN+AA74ATjgB+A42Q/w+znNj7MWBm8B/AAc8ANwwA/AAT8AB/wAHN+0yYnFgZnZAAAAAABJRU5ErkJggg==" alt="" />

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA1CAIAAACsmLLmAAADYklEQVR4nO2cz5WkIBCHycIwPBBER+HFw2ZgEFwIoWPgQgSTghcyIAv2oGDxp+3Z7WkHmt93mDdP0RXrswpq3lvmAKgA9tsPAIBzEBFUAkQEVQARQRVARFAFEBFUAUQEVQARQRVARFAFEBFUAUQEVcD+gBb4bU/eDuthkq3TQ4wgYgP0ECOI2AA9xAgiNkAPMYKIDdBDjCBiA/QQI4jYAD3EqFURGXvYij851SjFGGkxMzbo1dKDcuKMMcbYMM42vcJwxqQyZCQ30QA7j8N2OZ/kDz7/d/hYEVmJCx/wJ0liZJT0E4pE1GL2/tl5HBKZjJKbeVrM/vJIRDlxf4nhjM1Cv21CBcoi2lUP5Ouh+G8u/Ra/j3+PvHB3QnhfxccoWhUUfDqyLR4kC8OjKEQJL2gXkBOnbtlVD2SAXfVA7kacvoiHGVGLOTfAKPlDH4qdx9uJiFrM/ussj4SIiYjnYmXWpuONktS83ON3888iFvPTv3Mu4nZ2W7IMQgi92mKpTcpu8vNTS7MncitTJzqbZ7hExGRAcvYCzkScpokUx2Ml648YvtfoL76X2u0IV0qG9TJZkdAim4hoeHzn2zh/KSmV0UIodc+XAU8zYhiQ/9IcL4to53FIMkhLIm7F0a569I+YZES76tsknXNaLGHOy7RYZya/Uv5SyhZqeiRiuK1d9SL0JqIQwjq7TMv9uLl/6FIJdn2LeFKai1a1WJo3t5wrlOa9hgpxPw5l0w6+ZhcebHsgui4UPpXmrQSI6Jx7ulkJYpHt8MHTzcrFHZznIlKN8jWiUXIR4k5q7pYR+TFJc/M9BeJrJKIWwvi78T3Fzo92RdSn4r6kVxGdnDht3/gXmA7byPIF7fhETl/DiYjLuC8K92mEZmmctI986Zd6x2LRRFftrSnSBisciTuu+T93JiI9mPj3SZsV+rril3as48NnnNRcF6/aaXyzlfqlvN7QNuLCzuejcvz9AS3yQoxoaqyal0Qs/ZnoXZyktHDqJEE2zX/HKOsm1kurf+Lrih5iBBEboIcYQcQG6CFGELEBeogRRGyAHmIEERughxhBxAboIUb4L0fa4Lc9eTvNN3vBZwARQRVARFAFEBFUAUQEVQARQRVARFAFEBFUAUQEVQARQRVARFAFEBFUAUQEVfAXhcDk8om42QwAAAAASUVORK5CYII=" alt="" />

当字数达到某个值时,如10个字,这时文本框将不允许你再次输入,这使用了subscribe,而长度与文框关的关联使用了computed(dependentObservable依赖监视器也是可以的),而何时去触发事件使用了valueUpdate属性afterkeydown属性值表示当键盘被按下时触发.

下面看一下实现的原代码

HTML代码

  <input type="text" data-bind="value:count,valueUpdate: 'afterkeydown'" />
<span data-bind="text:countLen"></span>/
<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系列之文本框数符长度动态统计功能的更多相关文章

  1. MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放

    返回目录 本文章应该是knockoutjs系列的最后一篇了,前几篇中主要讲一些基础知识,这一讲主要是一个实际的例子,对于一个对象的添加与编辑功能的实现,并将项目源代码公开了,共大家一起学习! knoc ...

  2. MVVM架构~knockoutjs系列之验证信息自定义输出~再续

    返回目录 对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是"整理近可能多的架构方式",这样才可以自由的应变 ...

  3. MVVM架构~Knockoutjs系列之对象与对象组合

    返回目录 在面向对象的程序设计里,对象是核心,一切皆为对象,对象与对象之间的关系可以表现为继承和组合,而在Knockoutjs或者JS里,也存在着对象的概念,今天主要说一下JS里的对象及对象的组合. ...

  4. MVVM架构~Knockoutjs系列之验证机制的引入

    返回目录 对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.va ...

  5. MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定

    返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...

  6. MVVM架构~knockoutjs系列之正则表达式使规则更灵活

    返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...

  7. MVVM架构~knockoutjs系列之包括区域级联列表的增删改

    返回目录 这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现“我的银行”模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点,在开发过程中,我们应 ...

  8. MVVM架构~Knockoutjs系列之js接收C#数据集合的方式

    返回目录 在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockou ...

  9. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

随机推荐

  1. UIScrollView的三个属性

    contentSize.contentOffset.contentInset   UIScrollView的frame的size 指的是可视范围   contentSize  内容大小,滚动的范围 创 ...

  2. SIGGRAPH2016【转】

    本文摘自:http://blog.selfshadow.com/ Open Access SIGGRAPH 2016 Conference Content (for a limited time) R ...

  3. rhel7报错整理

    报错现象1: 安装过程需要一段时间,等待完成.   重启后进程     输入 q   再次输入 yes   重启后进入           报错现象2:     挂载镜像后,系统一重启报错:   来自 ...

  4. 高等微积分及其应用 nicholas.pdf——下载地址

    http://pan.baidu.com/share/link?shareid=426414429&uk=3977204074 这本书在网络上很少有了,本人是在群里下过来整理成一个文档了,由n ...

  5. UVALive 4329 Ping pong(树状数组)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=13895 题意:一条街上住有n个乒乓选手,每个人都有一个技能值,现在 ...

  6. hdu acm 1166 敌兵布阵 (线段树)

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  7. Tomcat settings should be set in Tomcat Preference Page解决

    选择tomcat version,然户找到该tomcat的主目录,输入在tomcat home,下面的参数会自动配置,点击apply. 然后在左边选择advanced,同样把tomcat的主目录复制在 ...

  8. css长度值与颜色值

    颜色值 在网页中的颜色设置是非常重要的,有字体颜色,背景颜色,边框颜色等,设置颜色的方法也有很多种: 1.英文命令颜色 p{color:red;} 2.rgb颜色 p{color:rgb(133,45 ...

  9. Arc Engine下数据的加载处理

    1.加载Shapefile数据 IWorkspaceFactory pWorkspaceFactory; IFeatureWorkspace pFeatureWorkspace; IFeatureLa ...

  10. Runtime 动态加载方法

    动态加载 #import"ViewController.h" #import"Person.h" @interfaceViewController() @end ...