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。）

Answer 2

使用这个： http://jsfiddle.net/DnBsR/2/ 说明：使用$$（选择器），您可以解析普通的css选择器，因此这个选择#myform的所有输入元素。我们用.each循环它们，并在循环中向它们添加一个事件处理程序。由于我们不能在处理程序中使用$（'element'），我们只使用this，它指向事件被触发的元素。

MooTools：形式上的“this”元素

2 个答案: