Question

在twitter登录页面上，输入字段的标签到达使用javascript / jquery的常用技巧的输入字段。但是，我通过Twitter来找出他们是如何做到的。我发现onChange：它将一个类'hasome'添加到父div并且有一个默认文本作为span，它永远不会获得像display:none;这样的属性。

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

修改 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'。在萤火虫中，我看不到分配给'hassome'课程的任何属性。我的问题是，如果通过CSS实现，那么代码在哪里或者CSS。

Answer 1

即使这不是他们正在做的事情，您也可以使用HTML5属性placeholder

来完成相同的结果

请记住，这是supported by most major browsers，IE常规例外。所以如果你不关心这个问题，你肯定可以使用它。

Answer 2

它只是在字段上显示一个绝对定位的跨度，然后在输入任何内容后立即隐藏它（并在字段再次变为空白时重新显示它）。眼前的隐藏是为什么跨度掩盖了这个领域并不重要。奇怪的是，看起来他们并没有真正使用过标签，尽管我没有理由不这样做。

Answer 3

这是CSS。 http://a0.twimg.com/a/1347042098/t1/css/t1_core_logged_out.bundle.css具有以下规则：

.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);}

请注意，对于.placeholder中的任何.hasome，其opacity设置为0。因此，它没有显示。

不是我会这样做的，但至少他们是这样做的。

Answer 4

虽然hasome类应用于父div，但它在选择器中使用，该选择器在子范围上设置CSS值。因此，在Firebug（或Chrome或IE的开发人员工具）中，您需要密切关注该子跨度，而不是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技术。

Twitter如何将标签放在文本框中？

4 个答案: