Forms Mootools停止表单提交方法_Forms_Mootools

Forms Mootools停止表单提交方法

forms

Forms Mootools停止表单提交方法,forms,mootools,Forms,Mootools,我不想使用按钮提交表单，而是使用元素。这是由于造型要求。所以我有这个代码： myButton.addEvent('click', function() { document.id('myForm').submit(); }); 但是，我还编写了一个类，它改进并实现了输入和文本区域上的占位符属性： var FDPlaceholderText = new Class({ Implements: Events, initialize: function() {

我不想使用

按钮提交表单，而是使用

元素。这是由于造型要求。所以我有这个代码：

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

但是，我还编写了一个类，它改进并实现了

输入

和

文本区域

上的

占位符

属性：

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();
});

如果使用实际的

按钮提交表单，则上面的类非常有用：它侦听提交并清除输入值（如果它们仍然是默认值），从而验证它们基本上是空的

但是，由于我正在通过侦听

标记上的单击事件提交一个表单，因此

表单.addEvent（'submit'，函数（e）{

没有被触发

感谢您的帮助。

这是因为

submit（）

方法不是来自MooTools，而是一个本地方法

也许您可以使用

来满足您的样式要求。

这是因为

submit（）

方法不是来自MooTools，而是本机方法

也许您可以使用

来满足您的样式要求。

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

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

记住几件事（或更多）

缺少placeholder=属性的元素的占位符值是无意义的

如果您检测到占位符支持，请执行一次，而不是在每个元素上执行，它不会在循环的中途突然更改。您可以执行类似于

var supportsPlaceholder=！！（'document.createElement（'input'）中的占位符）；

-记住，如果浏览器支持占位符，并且当前执行，则无需执行任何操作

您还可以执行

！supportsPlaceholder&&el.get（'placeholder'）&&self.initPlaceholder（el）；

-这样可以避免在不需要时检查属性

提交表单时，您确实需要清除旧浏览器中的占位符=值，否则“必需”等的验证将失败。如果验证仍然失败，您必须恢复占位符，因此您需要更灵活的事件模式

避免直接引用el.value之类的对象属性-改用

el.get（'value'）

之类的访问器（对于1.12，它是getProperty）

有关如何在mootools中处理此问题的更复杂示例，请参见此处的my repo: