用 prototype 来写 Ctrl+Enter 提交表单

Category: Javascript   Keywords: prototype formsubmit

我以前写过一个用 Ctrl+Enter 来提交表单同时让 Submit 按钮灰掉的代码。（见 Javascript: Events）

今天在 chunzi 兄那看到他用 prototype 写了个例子，觉得自己也该再好好看看 prototype, 同时也该写个例子。
挑来挑去，最后还是写以前的那个例子。不过不同的是用 prototype 实现。
代码如下：

var FormSubmitWatcher = Class.create();
FormSubmitWatcher.prototype = {
    initialize: function(cForm) {
        this.cForm = $(cForm);
        var elements = Form.getElements(cForm);
        for (var i = 0; i < elements.length; i++) {
              var element = elements[i];
            if (element.type.toLowerCase() == "textarea") {
                this.cText = element;
                this.cText.onkeypress = this.SubmitOnce.bindAsEventListener(this);
            }
        }
    },
    SubmitOnce : function(evt) {
        var x = evt.keyCode;
        var q = evt.ctrlKey;
        if (q && ( x == 13 || x == 10)) {
            this.cForm.submit();
            Form.disable(this.cForm);
        }
    }
}

应用的时候可以怎么写：

<script src="http://www.fayland.org/javascript/prototype.js" type="text/javascript"></script>
<script src="http://www.fayland.org/javascript/FormSubmit.js" type="text/javascript"></script>
<form id="test1">
<textarea id="content1" rows="10" cols="60"><lt;/textarea>
<input type=submit>
</form>
<form id="test2">
<textarea id="content2" rows="10" cols="60"><lt;/textarea>
<input type=submit>
</form>
<script type="text/javascript">
var watcher = new FormSubmitWatcher('test1');
var watcher = new FormSubmitWatcher('test2');
</script>

这样就能可以了。如果只应用到 test2 表单，就把 FormSubmitWatcher('test1'); 那一句去掉。
用 prototype.js 写的一个很大的好处就是 js 代码和 html 代码分开的很清楚。
另外 protoype 提供了非常强大而常用的几个扩展。有机会我会再试试。:-)

对于 prototype.js 的很多方法和类我都没应用，就用了两个：Class.create 和 Form.disable/Form.getElements
需要更多的运用我是推荐仔细再看一遍：https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html