Textarea 域的字数统计

May 1st, 2009 | Filed under JavaScript

在一些流行的网站,比如 Twitter 等,当你在 Textarea 中输入文字,通常会有文字自动统计你已经输入了多少个字符,总计多少个字符,还能输入多少字符,这样的小提示,通常能增强用户体验,像 Twitter 这样限制 140 字的微博客站点,这个功能也变得必不可少。

而我现在正在做的一个项目,其中发送 SMS 的文本框,也必须要提示用户输入的字数,下面就是我的实现方式,采用的 Mootools。基本的计算都已经有了,只要稍作修改,比如限制文字长度,提示剩余多少文字等等,这样就可以拿到自己的项目中使用了。 😉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script language="Javascript">
//<[CDATA[
var Countable = new Class({
    count: 0,
    sms_count: 0,
    hint_template: "一共輸入了 {count} 個字,需要 {sms_count} 則簡訊傳送",
 
    // 初始化
    initialize: function(textareaId)
    {
        // 得到 Textarea 对象
        input = $(textareaId);
        if (input) {
            // 创建一个提示信息对象
            this.hint = new Element("div", {
                'class': "hint"
            });
 
            // 放到 textarea 的后面
            this.hint.injectAfter(input);
 
            // 设置事件
            input.addEvent('keydown', this.onKeyPress.bindWithEvent(this));
            input.addEvent('keyup',   this.onKeyPress.bindWithEvent(this));
 
            // 设定 Input 为 Class 属性,方便其它方法中使用
            this.input = input;
 
            // 有时候刷新页面时 Firefox 会莫名奇妙缓存 Textarea 中文字
            // 这里调用一次 update(),计算被缓存的文字长度
            this.count = input.value.length;
            if (this.count > 0) {
                this.sms_count = 1;
                this.update();
            }
        }
    },
 
    // 按键处理
    onKeyPress: function(event) {
        event = new Event(event);
 
        // 当使用 Modifiter 组合键位时,停止计算
        if(!event.shift && !event.control && !event.alt && !event.meta) {
            this.update();
        }
    },
 
    // 更新
    update: function()
    {
        // 获得当前 Textarea 域中文字数
        this.count = this.input.value.length;
        if (this.count > 0) {
            this.sms_count = 1;
        }
 
        // 临时的数字数组,用于替换模板
        var foo = {count: this.count, sms_count: this.sms_count};
 
        // 翻译文字模板,将 Html 文字信息嵌入到 Hint 层中
        var hint_html = this.hint_template.substitute(foo);
        this.hint.innerHTML = hint_html;
    }
});
 
 
/**
 * Startup
 */
window.addEvent('domready', function () {
    new Countable('sms_text');
});
</script>
  1. 华晨
    Aug 23rd, 2009 at 12:53
    Reply | Quote | #1

    这个东西好,收藏了

Comments are closed.