javascript - MooTools:表单上的 "this"元素

Question

http://jsfiddle.net/DnBsR/

正如您在 jsfiddle 中看到的，“名称”输入框的效果按计划工作:

• 如果您点击它，它会滑动以便您可以看到标签。
• 如果您随后点击它，它就会滑回来。
• 如果您在框中输入文本，它不会滑回，直到其中不再有任何内容为止。

这种效果正是我想要的(暂时忘记它没有覆盖整个标签等)。

但是，如您所见，我将拥有多个表单输入框。您在 MooTools 中添加了什么，以便它适用于每个输入框，而不仅仅是一个输入框？类似“这个”的东西吗？无法解决...

此外，如果有人想让当前的 MooTools 变得更好，请随意，因为这可能会更容易完成......

干杯!

Answer 1

首先，您必须使用 $$ 选择器来处理元素集合(而不仅仅是单个元素)。由于 DOM 中不能有两个(或更多)具有相同 ID 的元素，因此您应该使用其他方法对它们进行分组 - 我认为类是最常见的方法。

其次，您应该在事件处理程序中使用 this 变量(而不是尝试一次又一次地遍历 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和玩。 )