1

ページにテキストボックスとそのラベルがあります。デフォルトでは、ページにテキストボックスがある場合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。テキストボックスに文字がなくなるまでラベルを表示する必要があります。つまり、テキストボックスがフォーカスされてもまだ何も書き込まれていない場合、ラベルも表示されるはずです。

PS私はplaceholderHTML5の属性を使用していません。

4

2 に答える 2

1

私の理解が正しければ、これはラベルがテキスト ボックスの上にあるためです。つまり、テキスト ボックスではなくラベルをクリックしているのです。CSS ポインタ イベントを使用して、ラベルがクリックに反応するのを止めることができます。どうやら Webkit でサポートされているようですが、特に iPad についてはわかりません。これを試してください：

.labelwrap label {
    pointer-events: none;
}

テキストボックスがフォーカスされたときに非表示にするには、これを試してください：

.labelwrap input:focus {
    z-index: 1; /* Or something greater than that of the <label> */
}
于 2012-07-31T16:52:15.163 に答える
0 
<input type="text" id="srl_input" class="serial_input" placeholder="Serial Number...">
于 2012-07-31T16:32:26.427 に答える