如何在文本框中添加标签支持'点击粘贴'功能

How to have a textbox with label inside it support 'tap to paste' feature in iPad?

本文关键字：功能 支持 文本 加标签 添加      更新时间：2024-06-12

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

<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功能。标签需要显示，直到文本框中没有字符为止，即如果文本框获得焦点，但还没有写入任何内容，在这种情况下，标签也应该可见。

附言：我没有使用HTML5的placeholder属性。

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

.labelwrap label {
    pointer-events: none;
}

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

.labelwrap input:focus {
    z-index: 1; /* Or something greater than that of the <label> */
}

<input type="text" id="srl_input" class="serial_input" placeholder="Serial Number...">
相关文章：