Javascript/CSS 浮动标签答案

【问题标题】：Javascript/CSS Floating LabelsJavascript/CSS 浮动标签
【发布时间】：2013-11-26 04:58:56
【问题描述】：

我遇到了一个非常奇怪的问题，似乎无法弄清楚我是在查看 javascript 还是 css 问题。这是一个jSFiddle，用于我正在谈论的一些上下文。如果您在输入框中键入并且没有看到标签弹出窗口，请删除文本并再次键入......很奇怪吧？

我有一个可以直接查看或在 iFrame 中查看的表单。在输入上，我使用jvfloat.js 使用placeholder 值提供浮动标签。

$(document).ready( function() {
   $('input').jvfloat();
});

我在不同的浏览器（当前版本）中得到不同的结果，而且奇怪的是，无论是否在 iFrame 中。

铬

在 IFrame 中：

在文本字段中键入不会弹出标签。检查显示“activeLabel”类添加成功，但它似乎没有呈现。似乎 CSS 转换无法将标签从输入后面向上移动。

在 IFrame 之外：

按预期工作。

火狐

IFrame 内/IFrame 外：

按预期工作

我还没有在任何其他浏览器中尝试过。有时标签不起作用，我无法始终如一地重复这个问题。

在 jsFiddle 中，您能看到导致这种奇怪行为的 javascript 或 CSS 的任何主要问题吗？

【问题讨论】：

【解决方案1】：

这是一个 CSS 问题。

您正在使用display、visibility 和opacity 来显示/隐藏您的浮动占位符。太过分了，你只需要一个！我得到opacity，你需要它来获得效果。

我不再使用 visibility，现在它可以工作了：

【讨论】：