我在页面中有一个文本框及其标签。默认情况下,如果页面中有一个文本框,它将支持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...">