Rails 助手导致输入占位符不起作用

Question

我的应用程序中有一些 jQuery，它根据输入字段中是否存在输入来删除/显示占位符。如下：

$(document).ready(function() {
    $('input').keyup(function() {
        if ($(this).val().length) {
            $('label[for='+$(this).attr('name')+']').hide();
        } else {
            $('label[for='+$(this).attr('name')+']').show();
        }
    });
});

但是，由于我的 label 和 text_field 表单助手，这不起作用。下面的 HTML 是 jQuery 的工作方式：

<label for="user_email">Email</label>
<input id="user_email" name="user_email" size="38" type="text" />

这是使用帮助器渲染的 HTML：

<label for="user_email">Email</label>
<input id="user_email" name="user[email]" size="38" type="text" />

如您所见，帮助程序使label for 和input id 的HTML 与input name 的HTML 不匹配。谁能帮我解决这个问题？

Answer 1

如果属性值中有特殊字符（如[ 和]），则只需将值括在引号中即可。 IE。而不是选择器label[for=user[email]]（已损坏）使用label[for="user[email]"]。您的代码中的等效更改是：

$(document).ready(function() {
  $('input').keyup(function() {
    if ($(this).val().length) {
      $('label[for="' + $(this).attr('name') + '"]').hide();
    } else {
      $('label[for="' + $(this).attr('name') + '"]').show();
    }
  });
});

Answer 2

我意识到这并不能回答 rails 的问题，但如果您正在考虑在 jQuery 端使用不同的代码：

不久前，我为占位符编写了一个 jQuery 插件。它在文本上执行 3 种颜色状态（占位符模糊、占位符聚焦、用户输入）、自定义占位符文本，以及一些用于验证和表单提交的方法（即占位符是否处于活动状态，或者是用户输入）。它还为您提供了一个 CSS 挂钩。或许有帮助？

Project Home

语法明智，您只需将其附加到文本字段或 div 并指定占位符文本。文档中提供的示例。