How can I put a label inside my text box?

Question

I have many text fields that show the text of the instruction in a text field (what the default value will look like). When focusing, the text color becomes lighter, but does not disappear before entering text. When the text is erased, the label is returned. This is a pretty spot. The default value does not shorten it, because they disappear in focus.

I have a job, but the code is complicated because it relies on negative margins corresponding to the individual widths of the text fields. I want a dynamic solution where the label for its text field is positioned correctly automatically, possibly using a script.

Any help would be greatly appreciated. But I am not looking for default values ​​as a solution.

Thanks.

Mike

Edited more accurately.

Edited again to provide simple code that illustrates the effect I get after:

<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='&nbsp;';}" onkeyup="javascript: if (this.value=='') document.getElementById('nameLabel').innerHTML='Your&#160;Name';" onblur="javascript: if (this.value=='') {document.getElementById('nameLabel').style.color='#7e7e7e'; document.getElementById('nameLabel').innerHTML='Your&#160;Name';}"/> <label id="nameLabel" for="name" style="position: relative; margin-left: -150px; font-size: 10px; font-family: Verdana, sans-serif;">Your Name</label> 

Answer 1

I would choose a different approach (this is not quite my idea, but I can not find a source for a loan):

1st - Use the html5 property "placeholder".

2nd - use Modernizr.js to find support for placeholders in the browser and a simple jQuery script to add support for browsers that don't support it.

So html will look something like this:

 <input type="text" class="placeholder" placeholder="Help Text" /> <textarea class="placeholder" placeholder="Another help text"></textarea> 

css:

 .placeholder{color:#ccc;} 

And javascript:

 /* Set placeholder for browsers that don't support HTML5 <input placeholder='text'> * Depends on Modernizr v1.5 */ if (!Modernizr.input.placeholder){ $('input[placeholder], textarea[placeholder]') .focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }) .blur(function() { var input = $(this); if (input.val() == '') { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }) //Run once on load .blur(); // Clear all 'placeholders' on submit $('input[placeholder], textarea[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }); }); } 

Answer 2

Do you mean this ? But instead of “required”, will it have a label?

I used the jQuery solution where I set the input value to "required". The input has a gray class, so default text is easier.

---

Edit after comment

Instead of using focus, you can change the input values ​​by pressing and pressing a key.

 $('.required_input').keydown(function() { if (this.value == 'required') { $(this).val('').removeClass('gray'); } } ); $('.required_input').keyup(function() { if (this.value == '') { $(this).val('required').addClass('gray'); } } ); $('.required_input').blur(function() { if (this.value == '') { $(this).val('required').addClass('gray'); } } ); 

Answer 3

What you specify here is probably called a textbox watermark.

For this, usually do not use a label (control) inside the text box. Instead, you replace the contents of the text box when the actual content of the text box is empty with some text using a specific CSS property, and then deletes it as soon as you blur (with an additional check to see if the text inside the text box itself is the same as watermark text. If so, fill the field again.)

Try this . This is a pretty simple implementation of this using jquery and css.

Answer 4

Here is the one I borrowed somewhere:

 $(function() { // Give the textbox a watermark swapValues = []; $('.your_input_class').each(function(i){ $(this).val("Please enter xyz"); swapValues[i] = $(this).val(); $(this).focus(function(){ if ($(this).val() == swapValues[i]) { $(this).val("").css("color", "#333"); } }).blur(function(){ if ($.trim($(this).val()) == "") { $(this).val(swapValues[i]).css("color", "#ccc"); } }); }); }); 

And then for your input field:

 <input class="your_input_class" type="text" value="" /> 

It remembers the value that is stored in it when the page loads (well, I set mine directly in JS), and also changes color when it focuses / does not focus.

Answer 5

 <script type="text/javascript"> window.onload = function(){ inputs = document.getElementsByTagName("input"); for(i = 0; i < inputs.length;i++){ var feild = inputs[i]; if(feild.type == "text"){ var label = document.getElementById(feild.id + "Label"); label.style.left = "-" + feild.clientWidth; } } } </script> 

This bit of script should do what you need