如何在其中添加帶有標籤的文本框支持iPad中的「點按即可粘貼」功能？

我在頁面中有一個文本框和它的標籤。默認情況下，如果您在頁面中有文本框，它將支持iPad中的tap to paste功能。在我的情況下，我也可以點擊和粘貼。如何在其中添加帶有標籤的文本框支持iPad中的「點按即可粘貼」功能？

<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功能。標籤需要被顯示直到文本框中沒有字符，即如果文本框獲得焦點但沒有寫入任何內容，那麼標籤應該是可見的。

P.S.我沒有使用HTML5的placeholder屬性。

來源

2012-07-31 Rakesh Juyal

如果我理解正確的話，這是因爲標籤是坐在文本框的頂部，所以你實際上點擊它，而不是文本框。您可以嘗試使用來停止標籤對點擊的反應。顯然他們得到了Webkit的支持，但我不明白iPad的具體情況。這給一展身手：

.labelwrap label { 
    pointer-events: none; 
}

爲了當文本框被聚焦它消失了，試試這個：

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

來源

2012-07-31 16:52:15

謝謝@Olly pointe-events工作得很好:)。我希望我可以兩次上調它。 – 2012-08-01 05:14:40

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

來源

2012-07-31 16:32:26 reagan

請參閱我提到我不使用佔位符。 – 2012-07-31 16:47:41

我不明白你爲什麼不使用確切的東西來完成你所需要的...但是好的，抱歉，我忍不住。 – reagan 2012-07-31 16:49:37

如何在其中添加帶有標籤的文本框支持iPad中的「點按即可粘貼」功能？

回答

相關問題