Question

I have a textbox and its label in the page. By default if you have a textbox in the page it will support tap to paste feature in iPad. In my case too I am able to tap and paste.

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

But if I will use css and keep this label inside the textbox then I lose this feature. I think when I tap on the textbox actually it is the label which gets the focus and hence I don’t see any option to paste. If I set display: none to the label then I can use tap to paste. Infact if I set z-index: -1 in that case too I can paste the text. But in both of these cases the label is not shown inside textbox ( obviously 🙂 ).

Please let me know how can I have the label inside the textbox and still have the tap and paste feature. Label is required to be displayed till there is no character in the textbox i.e. if the textbox gets the focus but nothing is written yet, in that case too label should be visible.

P.S. I am not using placeholder attribute of HTML5.

Answer 1

If I’ve understood you correctly, this is because the label is sitting on top of the text box, so you’re actually clicking on it, not the text box. You could try using CSS pointer events to stop the label reacting to clicks. Apparently they’re supported by Webkit, but I don’t know about the iPad specifically. Give this a go:

.labelwrap label {
    pointer-events: none;
}

To make it disappear when the textbox is focussed, try this:

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