0

http://jsfiddle.net/DnBsR/

jsfiddle でわかるように、「名前」入力ボックスの影響は計画どおりに機能します。

  • クリックするとスライドしてラベルが見えます。
  • その後クリックすると、元に戻ります。
  • ボックスにテキストを入力すると、そこに何もなくなるまでスライドバックしません。

この効果はまさに私が望んでいるものです (今のところ、ラベル全体をカバーしていないことは忘れてください)。

ただし、ご覧のとおり、複数のフォーム入力ボックスを用意します。MooTools が 1 つの入力ボックスだけでなく、各入力ボックスで機能するようにするには、MooTools に何を追加しますか? 「これ」の線に沿った何か？うまくいかない...

また、誰かが現在の MooTools をより良くしたい場合は、お気軽にどうぞ。おそらくはるかに簡単に行うことができます...

乾杯！

4

2 に答える 2

4

まず、$$セレクターを使用して、要素のコレクション (単一の要素だけでなく) を操作する必要があります。また、DOM で同じ ID を持つ 2 つ (またはそれ以上) の要素を持つことはできないため、それらをグループ化するには他の手段を使用する必要があります。クラスは、それを行う最も一般的な方法だと思います。

this第 2 に、変数はターゲット要素に対応するため、イベント ハンドラー内で (DOM を何度も走査するのではなく) 変数を使用する必要があります。

最後に、イベントの添付ファイルをチェーンできます (チェーンする必要があります)。このような：

$$('.element').addEvent('focus', function(){
    var input_value = this.value;
    if (input_value == '') {
        this.morph({
          'left': '60px',
          'width': '256px'
        });
    }
}).addEvent('blur', function(){
    var input_value = this.value;
    if (input_value === '') {
      this.morph({
        'left': '16px',
        'width': '300px'
      });
    }
});

ここで遊ぶJS Fiddleがあります。)

于 2012-10-15T18:06:55.373 に答える
1

これを使用してください: http://jsfiddle.net/DnBsR/2/ 説明: $$(セレクター) を使用すると、通常の css セレクターを解析できるため、#myform のすべての入力要素が選択されます。それらを .each でループし、ループ内でイベント ハンドラーを追加します。ハンドラーで $('element') を使用することはできなくなったため、イベントが発生した要素を指す this のみを使用します。

于 2012-10-15T18:06:43.147 に答える