Question

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

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

但是，我还编写了一个类，用于改进和实现placeholder和inputs上的textareas属性：

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) {不会被解雇。

感谢任何帮助。

Answer 1

你可以将点击处理程序更改为fireEvent（）而不是直接调用.submit（）：

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

记住一些事情（或更多）。

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

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

Answer 2

这是因为submit()方法不是MooTools，而是原生方法。

也许您可以使用<button type="submit">代替您的样式要求。

Mootools停止表单提交方法

2 个答案: