2

我不想使用<input type=submit />按钮提交表单，而是使用<a>元素。这是由于样式要求。所以我有这个代码：

myButton.addEvent('click', function() {
    document.id('myForm').submit();
});

但是，我还编写了一个类来改进和实现 和上的placeholder属性：inputstextareas

var FDPlaceholderText = new Class({
    Implements: Events,
    initialize: function() {

        var _self = this;
        var forms = document.getElements('form');        

        forms.each(function(form) { // All forms
            var performInit = false;
            var i = 0;
            var ph = [];
            form.getElements('input, textarea').each(function(el) { // Get form inputs and textareas
                if (el.getProperty('placeholder') != null) { // Check for placeholder attribute
                    performInit = true;
                    ph[i] = _self.initPlaceholder(el); // Assign the placeholder replacement to the elements
                } 
                i ++;
            });

            if (performInit) {
                _self.clearOnSubmit(form, ph);
            } 
        });

    },
    clearOnSubmit: function(form, ph) {
        form.addEvent('submit', function(e) {
            ph.each(function(el) {
                if (el.value == el.defaultValue) {
                    el.value = '';
                }
            });
        });
    },
    initPlaceholder: function(el) {

        el.defaultValue = el.getProperty('placeholder');
        el.value = el.getProperty('placeholder');

        el.addEvents({
            'focus': function() {
                if (el.value == el.defaultValue) el.value = '';          
            },
            'blur': function() {
                if(el.value.clean() == ''){ 
                    el.value = el.defaultValue;
                }
            }
        });

        return el;
    }
});

window.addEvent('domready', function() {
    new FDPlaceholderText();
});

如果使用实际<input type=submit />按钮提交表单，则上述类工作得很好：它侦听提交并清除输入值，如果它们仍然是默认值，因此验证它们基本上是空的。

但是，似乎因为我通过收听<a>标签上的点击事件来提交我的表单之一，form.addEvent('submit', function(e) {所以没有被触发。

任何帮助表示赞赏。

4

2 回答 2

3

好吧，您可以将点击处理程序更改为 fireEvent() 而不是直接调用 .submit() ：

myButton.addEvent('click', function() {
    document.id('myForm').fireEvent('submit');
});

记住几件事（或更多）。

  1. 缺少 placeholder= 属性的元素的占位符值是没有意义的
  2. 如果您检测到占位符支持，请执行一次而不是在每个元素上执行一次，它不会在循环中途突然改变。你可以这样做var supportsPlaceholder = !!('placeholder' in document.createElement('input'));——记住，如果浏览器支持它，就不需要做任何事情，目前，接近 60%做。
  3. 你可以这样做!supportsPlaceholder && el.get('placeholder') && self.initPlaceholder(el);- 这样可以避免在不需要时检查属性
  4. 提交表单时，您确实需要清除旧浏览器中的占位符 = 值，否则对“必需”等的验证将失败。如果验证仍然失败，则必须恢复占位符，因此需要更灵活的事件模式
  5. 避免使用像 el.value 这样的对象属性的直接引用 - 使用像这样的访问器el.get('value')（对于 1.12，它是 getProperty）

有关如何在 mootools 中处理此问题的更复杂示例，请在此处查看我的仓库：https ://github.com/DimitarChristoff/mooPlaceholder

于 2012-05-29T14:03:46.313 回答
1

这是因为该submit()方法不是来自 MooTools 而是原生的。

也许您可以使用 a<button type="submit">来满足您的样式要求。

于 2012-05-29T14:03:31.437 回答