2

<input type=submit />ボタンを使用してフォームを送信するのではなく、代わりに<a>要素を使用しています。これは、スタイル要件によるものです。だから私はこのコードを持っています:

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

ただし、 onとの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 />ボタンを使用してフォームが送信された場合にうまく機能します。送信をリッスンし、入力値がまだデフォルト値である場合はそれらをクリアして、それらが本質的に空であることを検証します。

ただし、タグのクリック イベントをリッスンしてフォームの 1 つを送信しているため、<a>タグform.addEvent('submit', function(e) {が起動されないようです。

どんな助けでも大歓迎です。

4

2 に答える 2

3

.submit() を直接呼び出す代わりに、クリック ハンドラを fireEvent() に変更できます。

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

いくつかのこと (またはそれ以上) に注意してください。

  1. placeholder= 属性を欠いている要素へのプレースホルダー値は無意味です
  2. プレースホルダーのサポートを検出した場合は、すべての要素ではなく一度だけ実行してください。ループの途中で突然変更されることはありません。あなたは次のようにすることができますvar supportsPlaceholder = !!('placeholder' in document.createElement('input'));- 覚えておいてください、ブラウザがそれをサポートしているなら何もする必要はありません.
  3. それ以外の場合は行うことができます!supportsPlaceholder && el.get('placeholder') && self.initPlaceholder(el);-これにより、不要なときに属性をチェックすることが回避されます
  4. フォームが送信されているとき、古いブラウザで placeholder= の値をクリアする必要があります。そうしないと、'required' などの検証が失敗します。検証がまだ失敗する場合は、プレースホルダーを元に戻す必要があるため、より柔軟なイベント パターンが必要です
  5. el.value のようなオブジェクト プロパティへの直接参照の使用を避ける -el.get('value')代わりにアクセサーのようなものを使用します (1.12 の場合は getProperty)。

mootools でこれを処理する方法のより複雑な例については、こちらのリポジトリを参照してください: https://github.com/DimitarChristoff/mooPlaceholder

于 2012-05-29T14:03:46.313 に答える
1

これは、submit()メソッドが MooTools のものではなく、ネイティブのものであるためです。

<button type="submit">代わりに、スタイリング要件にa を使用できます。

于 2012-05-29T14:03:31.437 に答える