Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I position a label inside its textfield?
    primarykey
    data
    text
    <p>I have many textfields that show instruction text within the textbox (how the default value would look). On focus the color of the text becomes lighter, but doesn't go away until text is entered. When text is erased, the label returns. It's pretty slick. <strong>A default value doesn't cut it, because these go away onfocus.</strong></p> <p>I have it working, but the code is complicated because it relies on negative margins that correspond to the individual widths of the textfields. I want a dynamic solution where the label for its textfield is positioned correctly automatically, probably using a script. </p> <p>Any help would be greatly appreciated. But I am not looking for default values as a solution.</p> <p>Thanks.</p> <p>Mike</p> <p>Edited to be more precise.</p> <p>Edited again to provide some simple code that illustrates the effect I am after:</p> <pre><code>&lt;input style="position: relative; width: 150px; font-size: 10px; font-family: Verdana, sans-serif; " type="text" name="name" id="name" onfocus="javascript: document.getElementById('nameLabel').style.color='#BEBEBE';" onkeypress="javascript: if (event.keyCode!=9) {document.getElementById('nameLabel').innerHTML='&amp;nbsp;';}" onkeyup="javascript: if (this.value=='') document.getElementById('nameLabel').innerHTML='Your&amp;#160;Name';" onblur="javascript: if (this.value=='') {document.getElementById('nameLabel').style.color='#7e7e7e'; document.getElementById('nameLabel').innerHTML='Your&amp;#160;Name';}"/&gt; &lt;label id="nameLabel" for="name" style="position: relative; margin-left: -150px; font-size: 10px; font-family: Verdana, sans-serif;"&gt;Your Name&lt;/label&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload