javascript : text box with default value

Question

I have text boxes with default values, I am not able to enter values into them when i am trying to enter, I have to first delete the existing value using delete key then only i can enter.

I want to enter values and on tab change it should change for the other box as well, currently it is changing focus but I cannot enter values into them.

<input type="text" name="namebox" id="{concat('textboxvalue', position())}" value="{@proj}" style="font-size:10px;padding:0px;height:15px;width:90px;text-align:right;"/>

@proj: values coming from database

Thanks, Ani

<input type="text" name="tproj" id="{concat('txtboxAdjustment', position())}" value="{@proj}" style="font-size:10px;padding:0px;height:15px;width:90px;text-align:right;" /> — Animesh
– Animesh, Commented Jul 25, 2013 at 9:56
<input type="text" name="tproj" id="{concat('txtboxAdjustment', position())}" value="{@proj}" style="font-size:10px;padding:0px;height:15px;width:90px;text-align:right;" /> @proj - is default value coming from database there are multiple text boxes i am creating in loop — Animesh
– Animesh, Commented Jul 25, 2013 at 9:58

cypherabe · Accepted Answer · 2013-07-25 10:11:29Z

5

You can use placeholders in the input tags and textarea tags:

<input type='text' placeholder='Default text here' />
<textarea placeholder='Default text here'></textarea>

Then use fallback with jQuery:

$(document).ready(function(e){
    var defaultVal = "Default text here";
    $("input, textarea").val(defaultVal).on("focus", function(){
        if($(this).val() == defaultVal){
            $(this).val("");
        }
    }).on("blur", function(){
        if($(this).val() == ""){
            $(this).val(defaultVal);
        }
    });

});

Here: http://jsfiddle.net/EZexQ/1/

edited Jul 25, 2013 at 10:11

cypherabe

2,6331 gold badge24 silver badges37 bronze badges

answered Jul 25, 2013 at 9:58

Stefan Dunn

5,5537 gold badges50 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Halcyon Over a year ago

The newest versions of all major browsers support it: caniuse.com/#search=placeholder It's worth to mention though.

Stefan Dunn Over a year ago

You could also replace defaultVal with the value of the placeholder attribute using var defaultVal = $("input").attr("placeholder");

pasine · Accepted Answer · 2013-07-25 10:02:55Z

I would suggest you to have a look at this css-trick article.
It has an example with html5 placeholder attribute with jquery fallback.

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};  


if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

Vishwanath · Accepted Answer · 2013-07-25 10:02:59Z

0

On the focus. Just remove the values. Following is sample code in jquery. Can be done with plain javscript though.

<input value=10>
<input value=20>
<input value=30>

$('input').on('focus', function(){
    $(this).val('')
})

answered Jul 25, 2013 at 10:02

Vishwanath

6,0246 gold badges40 silver badges59 bronze badges

1 Comment

Ayyappan Sekar Over a year ago

if the user enters a value in an input, then he refocuses the same, the value entered already will be cleared out.

Ayyappan Sekar · Accepted Answer · 2013-07-25 10:22:15Z

0

There is a DOM property called defaultValue for input elements. Am giving this solution as the placeholders do not work in older browsers.

First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>

In your jQuery, it can be accessed by prop('defaultValue') So try this.

$('input').focus(function(){
 if($(this).val() == $(this).prop('defaultValue'))
    $(this).val('');
}).blur(function(){
    if($(this).val() == '')
    $(this).val($(this).prop('defaultValue'));
});

Working fiddle here

answered Jul 25, 2013 at 10:22

Ayyappan Sekar

11.5k2 gold badges22 silver badges22 bronze badges

Collectives™ on Stack Overflow

javascript : text box with default value

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related