随着移动设备和Web应用的普及，为了更好的便于用户的使用，对于网页或应用程序的用户体验要求就越来越高，确实是这样，作为用户更喜欢选择用户体验效果好的网站或应用程序，所以作为开发者的我们就需要开发出更人生化的应用程序了。
相信许多人有使用微博的经验，像微博这样的社交平台，好的用户体验就变得尤其重要了。
例如：我们在发微博时，文本框会实时地提示我们剩余字符数，这样人性化的提示方便了用户知道微博字数的限制，同时也限制了用户的输入字数。
有一句话我们要牢记在心的是：凡是输入，必有限制；凡是输入，必须校验。
在接下来的文章中，我们将介绍如何实现输入字符实时提示功能和本地存储（localStorage）技术。
1、jQuery字符统计插件
现在，我们以新浪微博发送微博输入框为例子，介绍使用jQuery实现实时提示用户剩余字符数。
新浪微博是限制140个中文（280个英文），当然还有各种其他字符空格的情况，在用户输入达到限制之前或达到了，好的用户体验应该提示用户接近或达到了限制，当然我们可以通过使用不同颜色或加粗字体方式提示用户。
图1新浪微博用户输入限制
字符数统计插件会在输入框后创建一个同级元素span，它用来显示当前剩余字符数，当触发输入框的keyup、keydown和change事件时，实时修改span中剩余字符数，如果剩余字符数接近“warning”（接近零）修改CSS样式提示用户接近输入限制。
当剩余字符达到“warning”时，在span元素中添加相应的样式类，当剩余字符等于或大于输入限制时，添加相应的样式类提示用户已经超出字符数限制。
我们通过字符数统计插件在页面中动态地插入如下代码：
<!-- adds element dynamic --> <span>140</span>
在默认情况下，字符限制是140个，当可输入字符数少于等于25个提示用户，当可输入字符数少于等于0时，提示用户字符数超出了限制。下面我们定义默认情况下条件对象：
// The default limitation. var defaults = { allowed: 140, warning: 25, css: 'counter', counterElement: 'span', cssWarning: 'warning', cssExceeded: 'exceeded', counterText: '' };
上面，我们定义了defaults对象，它包含allowed、warning、css、cssWarning和cssExceeded等属性，通过修改defaults对象属性，我们可以很方便修改字符统计插件。
Allowed：允许输入的字符数。
Warning：提示用户剩余字符数接近限零。
Css：添加到counter元素的CSS样式类名。
cssWarning：警告提示样式。
cssExceeded：超出字符限制提示样式。
接下来，我们在字符统计插件中定义方法calculate()，它计算当前剩余字符数，如果到达了警告范围则在页面中增加样式类“warning”，当剩余字符数少于等于零时，在页面中增加样式“exceeded”。
/*** * Calculates the char * @param obj */ function calculate(obj) { // Get the count. var count = getLength($(obj).val()); var available = options.allowed - count; if (available <= options.warning && available >= 0) { $(obj).next().addClass(options.cssWarning); } else { $(obj).next().removeClass(options.cssWarning); } if (available < 0) { $(obj).next().addClass(options.cssExceeded); } else { $(obj).next().removeClass(options.cssExceeded); } $(obj).next().html(options.counterText + available); }
我们又定义方法getLength()，当输入字符是中文时totLen加1，如果是英文字符或数字时totLen加0.5（默认允许输入140个中文字符）。
/** * Get the length of char. * @param str * @return {Number} */ function getLength(str) { var totLen = 0; for (var i = 0; i < str.length; i++) { // If the char is Chinese. if (str.charCodeAt(i) > 256) { totLen += 1; } else { totLen += 0.5; } } return Math.floor(totLen); }
接下来，我们在控件中绑定keyup()，keydown()和change()事件方法，当页面对象触发keyup()，keydown()或change()事件方法时，调用calculate()方法计算当前剩余的字符数，并且添加相应的CSS样式到页面中。
// Binds text area keyup, keydown and change event. this.each(function() { $(this).after('<' + options.counterElement + '>' + options.counterText + '</' + options.counterElement + '>'); calculate(this); $(this).keyup(function() { calculate(this), storeWeibo(this) }); $(this).keydown(function() { calculate(this), storeWeibo(this) }); $(this).change(function() { calculatea(this) }); });