返回目录

这个功能为什么要写呢,因为在之前做了一个前端的页面效果,使用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. Linux 将文件夹下的所有文件复制到另一个文件里

    如何将文件夹/home/work下的文件复制到/home/temp里面? 使用命令: cp -R /home/work/* /home/temp *表示所有文件 但是/home/work 下的隐藏文件 ...

  2. terminal崩溃打不开的一种原因以及ubuntu下matlab权限不够的解决办法

    为了解决点击matlab图标闪退的问题,我往.bashrc添加了如下命令: source /usr/local/MATLAB/R2015b/bin/matlab 结果导致打开新的terminal闪退. ...

  3. Fresco简单的使用—SimpleDraweeView

    本文出处:http://blog.csdn.net/u011164565/article/details/51330778 Fresco是一个第三方库,github官网地址:https://githu ...

  4. 在Web应用中接入微信支付的流程之极简清晰版

    在Web应用中接入微信支付的流程之极简清晰版 背景: 在Web应用中接入微信支付,我以为只是调用几个API稍作调试即可. 没想到微信的API和官方文档里隐坑无数,致我抱着怀疑人生的心情悲愤踩遍了丫们布 ...

  5. <Oracle Database>诊断文件

    诊断文件 诊断文件是获取有关数据库活动的信息的一种方式,用于解决数据库出现的一些问题,主要包含有关数据库中出现的重要事件的一些信息,这些文件能更好的对数据库进行日常的管 理,主要类型有一下几种: 警告 ...

  6. html form 提交表单的一些问题

    1. 如果在一个form里有summit按钮,则只能提交本form的内容

  7. Android 断点续传 思路

    大部分http服务器本身是可以支持range字段和断点续传的.另外 http返回206字段表示支持断点续传. 但是遇到支持的服务器的时候,就需要手动去处理断点续传的功能. 客户端在请求文件的时候添加 ...

  8. java-IO

    框架图 IO(Input Output)流IO流用来处理设备之间的数据传输,Java对数据的操作是通过流的方式,用于操作流的对象都在IO包中. 流按操作数据分为两种:字节流与字符流 .流按流向分为:输 ...

  9. U盘的不识别问题

    1.案例: 我重新装过电脑以后出现过一个问题是: 我的U盘只能在我电脑上用,在其他电脑上不能用 其他人的U盘不能在我的电脑上用. 2.根本问题: 是驱动问题.接口上没符合的驱动,未能指定路径.电脑上可 ...

  10. 关于div弹出层的实际应用心得

    今天本人要做一个点击弹出的功能,因为这个功能是最后做的,所以写的时候很纠结, 因为本人小菜一枚, 开始尝试用 position:relative:来做一试不行呀 ,因为用这个来做的话 会打乱原有的布局 ...