javascript - Twitter 如何将标签放入文本框内？

Question

关于twitter登录页面，输入字段的标签到达输入字段内部，使用 javascript/jquery 的常见技巧。但是，我通过推特资源了解他们是如何做到的。我发现 onChange:它向父 div 添加了一个类“hasome”，并有一个默认文本作为跨度，它永远不会获得像 display:none; 这样的属性。

我试图通过他们的 HTML/CSS/JS 但找不到他们的方法。有人能告诉我怎么做吗twitter是这样做的吗？

编辑 推特代码:

<div class="placeholding-input username hasome">
    <input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
    <span class="placeholder">Username or email</span>
</div>

添加了有问题的 Twitter HTML。当我们添加一些代码时，它只会在父 div 中添加一个类“hasome”。在 Firebug 中，我看不到分配给“hassome”类的任何属性。我的问题是哪里有执行此操作的代码或 CSS(如果它是通过 CSS 实现的)。

Answer 1

虽然 hasome 类应用于父 div，但它用于在 child span 上设置 CSS 值的选择器。因此，在 Firebug(或 Chrome 或 IE 的开发人员工具)中，您需要密切关注子 span，而不是 div，以了解发生了什么。

您最终应该看到应用了以下来自 CSS 文件 t1_core_logged_out.bundle.css 的规则:

.has-content .placeholder, .hasome .placeholder
{
    font-size:0!important;
    z-index:-1;
    -moz-opacity:0;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}

最终生效的规则部分是“.hasome .placeholder”部分:当样式为 .placeholder 的元素的祖先类为 .hasome 时，将使用各种技术来隐藏该子元素。它基本上是在父级上使用类来控制子级或后代的样式，这是一种相当常见的 CSS 技术。