1

我在页面中有一个文本框及其标签。默认情况下，如果页面中有文本框，它将支持tap to pasteiPad 中的功能。在我的情况下，我也可以点击和粘贴。 

<div class="labelwrap">
<label for="srl_input" >Serial Number...</label>
<input type="text" id="srl_input" class="serial_input">
</div>

但是，如果我将使用 css 并将此标签保留在文本框中，那么我将失去此功能。我认为当我点击文本框时，实际上它是获得焦点的标签，因此我看不到任何粘贴选项。如果我设置display: none为标签，那么我可以使用tap to paste. 事实上，如果我z-index: -1也在这种情况下设置，我可以粘贴文本。但是在这两种情况下，标签都没有显示在文本框中（显然:)）。

请让我知道如何在文本框中包含标签并且仍然具有该tap and paste功能。需要显示标签，直到文本框中没有字符，即如果文本框获得焦点但尚未写入任何内容，在这种情况下，标签也应该可见。

PS 我没有使用placeholderHTML5 的属性。

4

2 回答 2

1

如果我对您的理解正确，这是因为标签位于文本框的顶部，因此您实际上是在单击它，而不是在文本框上。您可以尝试使用CSS 指针事件来阻止标签对点击做出反应。显然，Webkit 支持它们，但我不知道 iPad 的具体情况。试一试：

.labelwrap label {
    pointer-events: none;
}

要使其在文本框聚焦时消失，请尝试以下操作：

.labelwrap input:focus {
    z-index: 1; /* Or something greater than that of the <label> */
}
于 2012-07-31T16:52:15.163 回答
0 
<input type="text" id="srl_input" class="serial_input" placeholder="Serial Number...">
于 2012-07-31T16:32:26.427 回答