2

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

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

编辑 推特代码：

<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>

添加了有问题的推特 HTML。当我们添加一些代码时，它只会在父 div 中添加一个类“hasome”。在萤火虫中，我看不到任何分配给“hassome”类的属性。我的问题是，如果由 CSS 实现，那么哪里有执行此操作的代码或 CSS。

4

4 回答 4

2

即使这不是他们正在做的事情，您也可以通过使用 HTML5 属性占位符来完成相同的结果

请记住，大多数主流浏览器都支持这一点，但 IE 除外。因此，如果这不是您关心的问题，您绝对可以使用它。

于 2012-09-08T04:10:47.600 回答
2

它只是在该字段上显示一个绝对定位的跨度，然后在输入任何内容后立即隐藏它（并在该字段再次变为空白时重新显示它）。直接隐藏是为什么跨度遮挡字段并不重要。奇怪的是，看起来他们实际上并没有使用标签，尽管我认为没有充分的理由不使用。

于 2012-09-08T04:12:15.440 回答
2

这是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);}

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

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

于 2012-09-08T04:34:54.593 回答
2

当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 技术。

于 2012-09-08T04:37:29.567 回答