0

http://jsfiddle.net/DnBsR/

正如您在 jsfiddle 中看到的，“名称”输入框的效果按计划进行：

  • 如果单击它，它会滑动，因此您可以看到标签。
  • 如果您然后单击它，它会滑回。
  • 如果您在框中输入文本，它不会滑回，直到那里再没有任何内容。

这种效果正是我想要的（暂时忘记它不覆盖整个标签等）。

但是，可以看到，我将拥有多个表单输入框。你在 MooTools 中添加了什么使它适用于每个输入框，而不仅仅是一个输入框？类似于“这个”的东西？搞不定...

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

干杯!

4

2 回答 2

4

首先，您必须使用$$选择器来处理元素集合（而不仅仅是单个元素）。由于在 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 。)

于 2012-10-15T18:06:55.373 回答
1

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

于 2012-10-15T18:06:43.147 回答