ansaurus

Question

How can I position a label inside its textfield?

Answer 1

A:

Do you mean like this? But instead of 'required' it would have the label?

I used a jQuery solution where I set the value of the input to 'required'. The input has a class of gray so the default text is lighter.

Edit after comment

Instead of using focus, you can change the input values on keydown and keyup.

$('.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');
    }
} );

Emily 2009-07-21 03:15:33

Does it set the actual value of the text field to required? It may to be acceptable all the time.

Arun P Johny 2009-07-21 03:19:28

I don't think I can use a default value to get the results I am looking for. I updated the post to be more clear.

Mike 2009-07-21 03:48:31

You don't need to delete the default value on focus. You can wait until a keydown event. I changed my code to reflect that.

Emily 2009-07-21 04:13:57

Answer 2

A:

What you are asking here is probably what is called textbox watermark.

For this, you usually don't use a label (control) inside a textfield. Instead you replace the content of the textfield when the real content of the text field is empty with some text using certain CSS property and then remove it once you blur out (w/ additional check to see if the text inside the textbox itself is the same as the watermark text. If it is, blank the field again.)

Try this. It's pretty simple implementation of this using jquery and css.

Jimmy Chandra 2009-07-21 03:16:07

Not to be nit-picky, but I prefer to refer to this as cue banner text, not watermark. By definition, a watermark is persistent. Cue banner text, on the other hand, goes away when you focus the text box and stays away when you type in it. Not that it's a great reference or anything, but the Win32 APIs also refer to this feature as cue banner text.I agree that you likely don't want to position a label inside the text box. However, I also despise javascript solutions to this. It would be great if there were a property on the textbox element itself to indicate cue banner text.

dustyburwell 2009-07-21 04:28:09

Maybe they'll get around to adding it to the standard :). Namingwise I took it from ASP.NET AJAX Control Toolkit that uses that particular term. I'm thinking similarly you can use a pure CSS implementation of this using :hover and background image, it won't be perfect, but doable.

Jimmy Chandra 2009-07-21 06:31:11

Answer 3

A:

This can be a rough idea

<html>
<body onload="onpageload()">
 <input id="input1" name="input1"/>
 <div id="label1">0000</div>
</body>
<script language="javascript">
 function onpageload(){
  var el = document.getElementById("input1");
  var pos = el.getBoundingClientRect();

  var l1 = document.getElementById("label1");
  l1.style.top = pos.top+"px";
  l1.style.left = pos.left+"px";
  l1.style.zIndex = 9999;
  l1.style.position = "absolute";

 }
</script>
</html>

Arun P Johny 2009-07-21 03:27:52

Note: getBoundingClientRect() is an IE only function. More here: http://ejohn.org/blog/getboundingclientrect-is-awesome/

Josh Stodola 2009-07-21 03:35:38

Actually it is now supported by FF3. Still marginal support, in the grand scheme of things.

Josh Stodola 2009-07-21 03:36:55

This internal tool is Safari 4 only and that code places the label just below the textfield.

Mike 2009-07-21 03:51:06

Answer 4

A:

Here's one that I borrowed from 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 box:

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

It remembers the value that is stored in it when the page loads (well, I'm setting mine directly in the JS) and it also changes the color when it's focused/not focused.

Cory Larson 2009-07-21 03:43:44

Answer 5

+1 A:

I would have taken a different approach (It's not entirely my idea, but i can't find the source for credit):

1st - Use html5 "placeholder" property.

2nd - Use Modernizr.js to detect support of placeholders in the browser and a simple jQuery script to add support to browsers that doesn't support it.

So, the html will look something like that:

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

The css:

.placeholder{color:#ccc;}

And the 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('');
            }
        });
    });
}

Tombigel 2010-08-21 12:28:55

Answer 6

A:

<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 wanted

Gilsham 2010-08-25 00:15:45

ansaurus

tags:

views:

answers:

How can I position a label inside its textfield?

related questions