改变现有的 jQuery 以制作跨度占位符

Question

我有一些 jQuery，只要我的 与 input 名称和 ID 匹配，它就会提供占位符。然而，情况并非如此，因此我决定仅使用 作为占位符。有人可以帮助改变我的 jQuery 以使我正在使用的 类“holder”工作吗？目标是让占位符保持焦点，在输入存在时消失，然后在输入消失时重新出现。

这是我正在使用的 HTML：

<div id="placeholder">
  <span class="holder">This is the placeholder...</span>
  <%= f.text_area :body, :id =>"Placeholder" %>
</div>

以及我当前的 jQuery：

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

谢谢！

Answer 1

您想要绑定到 focus 和 模糊 事件并将 绝对定位在 上<文本区域>。从一些 CSS 开始：

#placeholder {
    position: relative;
}

.holder {
    position: absolute;
    top: 2px;
    left: 2px;
    display: none;
}

然后是 jQuery：

$('.holder').click(function() {
    $(this).siblings('textarea').focus();
});
$('#Placeholder').focus(function() {
    $(this).siblings('.holder').hide();
});
$('#Placeholder').blur(function() {
    var $this = $(this);
    if($this.val().length == 0)
        $(this).siblings('.holder').show();
});
$('#Placeholder').blur();

最后的 $('#Placeholder').blur() 调用用于初始化 的状态这样，如果 </code> 以内容开头，它将处于正确的状态。

还有一个快速演示： http://jsfiddle.net/ambigously/PLrf3/1/

顺便说一句，在同一页面中使用 id="placeholder" 和 id="Placeholder" 可能会导致一些混乱。您最好为 id 属性选择标准方案（camelCase、words-and-hyphens 或其他）并坚持使用。仅大小写差异可能会令人困惑，并且可能看起来像是拼写错误。

Answer 2

像这样的东西应该有效：

$(function() {
    $("span.holder + textarea").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.holder').hide();
        } else {
            $(this).prev('span.holder').show();
        }
    });        
});

如果页面上的所有文本区域前面都有 span.holder ，那么这应该适用于它们。