Javascript 如何在文本框中添加标签支持'；点击以粘贴'；iPad的功能？

我在页面中有一个文本框及其标签。默认情况下，如果页面中有文本框，它将支持iPad中的

点击粘贴功能。在我的情况下，我也可以点击和粘贴

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


序列号。。。

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

请告诉我如何将标签放在文本框内，并且仍然具有点击粘贴功能。需要显示标签，直到文本框中没有字符为止，即如果文本框获得焦点但尚未写入任何内容，则在这种情况下，标签也应可见

另外，我没有使用HTML5的占位符属性。

<input type="text" id="srl_input" class="serial_input" placeholder="Serial Number...">

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

.labelwrap label {
    pointer-events: none;
}

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

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

.labelwrap输入：焦点{
z指数：1；/*或大于*/
}
如果我理解正确，这是因为标签位于文本框的顶部，所以您实际上是在单击它，而不是文本框。您可以尝试使用停止标签对单击的反应。显然，Webkit支持它们，但我不知道iPad的具体情况。试一试：

.labelwrap label {
    pointer-events: none;
}

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

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

.labelwrap输入：焦点{
z指数：1；/*或大于*/
}
请参见我提到的我没有使用占位符。我不明白为什么您没有使用能够实现您所需的确切东西…，但好的，对不起，我帮不上忙。请参见我提到的我没有使用占位符。我不明白为什么您没有使用能够实现您所需的确切东西…，但好的，抱歉，我帮不上忙。谢谢@Olly pointe事件运作良好：）。我希望我能投两次票。谢谢@Olly pointe events运行良好：）。我希望我能投两次票。