Want to disapper input textbox default value

Question

Please do not give a negative vote if I am wrong with asking this question. I have a TextBox like this:

<input class="login-inpt" runat="server" name="loginName" type="text" value="User Name" />

It currently holds a default value. I want the default value to be cleared and replaced with a cursor when I click on the TextBox.

See this solution: http://stackoverflow.com/questions/4135818/how-to-clear-a-textbox-using-javascript — nkirkes, Aug 29 '13 at 14:13
This question is pretty similar to yours: http://stackoverflow.com/questions/1626107/text-in-html-field-to-disappear-when-clicked — Niklas, Aug 29 '13 at 14:14
Why do you have a `runat="server"` attribute in an ASP.NET MVC 3 view? You seem to be making some confusions between Classic ASP.NET WebForms and ASP.NET MVC. Which of those 2 technologies are you using? — Darin Dimitrov, Aug 29 '13 at 15:27
Your question does not have anything to do with asp.net MVC. This is an html/javascript question. I edited your question. — ataravati, Aug 29 '13 at 18:50
I am working on Asp.net MVC3.I got the solution by using OnFocus and OnBlur event.thanks to all of you. — AJay Garg, Sep 03 '13 at 05:34

kayz1 · Answer 1 · 2013-09-03T20:41:53.627

For newer browsers (IE>9):

<input type="text" id="userName" placeholder="User Name" />

For older:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Placeholder support</title>
</head>
<body>
    <input type="text" id="userName" placeholder="User Name" />

    <script src="../js/vendor/jquery-1.10.2.min.js"></script>
    <script src="../js/vendor/jquery-migrate-1.2.1.js"></script>
    <script src="../js/vendor/modernizr-latest.js"></script>
    <script src="../js/placeholder.js"></script>
</body>
</html>

placeholder.js (jQuery, Modernizr)

var Placeholder = (function ($, document) {

    /* Static Content */
    var _$document = $(document);

    /* Events */
    var _initPlaceholders = function () {
        _$document.find('input:text').each(function () {
            var $this = $(this);
            $this.css({ color: '#888' }).val($this.attr('placeholder'));
        });
    };

    var _placeholderEvent = function () {
        var $input = $(this), placeholderValue = $input.attr('placeholder');

        if ($input.val() === placeholderValue) {
            $input.css({ color: '#000' }).val('');
            return;
        }

        if ($input.val() === '') {
            $input.css({ color: '#888' }).val(placeholderValue);
        }
    };

    var _bindEvents = function () {
        if (!Modernizr.input.placeholder) {
            _initPlaceholders();
            _$document.on('focus blur', 'input:text', _placeholderEvent);
        }
    };

    var init = function () {
        _bindEvents();
    };

    return {
        init: init
    };
})(jQuery, document);

Placeholder.init();

This is indeed the best way to go, works cross browser according to [w3schools](http://www.w3schools.com/tags/att_input_placeholder.asp) — asontu, Aug 29 '13 at 20:06
This doesn't work in older versions of Internet Explorer. If you are only targeting the latest version of Internet Explorer, then it's a good option. — zigdawgydawg, Aug 29 '13 at 20:20

score 1 · Answer 2 · answered Aug 29 '13 at 14:13

1

HTML:

<input type="text" value="user name" id="userName" />

With jQuery:

$(function() {
    $('#userName').click(function() {
        $(this).val('').unbind('click');
    });
});

EDIT: Here's a demo

answered Aug 29 '13 at 14:13

zigdawgydawg

2,046
13
10

Jatin patil · Accepted Answer · 2013-08-30T05:03:58.643

1

You can try this

<input type="text" value="user name" onfocus="if(this.value=='user name') this.value='';">

edited Aug 30 '13 at 05:03

answered Aug 29 '13 at 15:25

Jatin patil

4,252
1
18
27

score 0 · Answer 4 · edited May 23 '17 at 12:00

0

add the following as an attribute to your input tag:

onfocus="if(this.value=='A new value') this.value='';"

From: How to clear a textbox using javascript

edited May 23 '17 at 12:00

Community

1
1

answered Aug 29 '13 at 14:14

nkirkes

2,635
2
21
36

score 0 · Answer 5 · answered Sep 03 '13 at 05:40

I got the solution Thanks. input type="text" id="userName" onfocus="inputFocus(this)" onblur="inputBlur(this)"

function inputFocus(i) { if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; } } function inputBlur(i) { if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; } }

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

You already got good answers but if you are newbie it might interest you how it could work without libraries.

Here is HTML:

<input id="textBox" class="textBox phrase" type="text" value="Enter Your Text..">

you don't need to set class and id you could pick one of them

Here is JavaScript:

var textBox = document.getElementById('textBox'), //probably the fastest method
/**************************additionally possible****************************

var textBox = document.getElementsByTagName('input')[0], //returns HTMLInputElement list (since we've got only one we chose the first one)
or
var textBox = document.querySelectorAll('textBox'), //works almost the same way as jquery does except you don't get all jquerys functionality
or
var textBox = document.getElementsByClassName('textBox')[0], //i guess its a least supported method from the list

***************************************************************************/    
    //text you want to choose for you input
    phrase = "Enter Your Text..";

function addEvent(el, ev, fn) {
    //checking method support
    //almost every browser except for ie
    if(window.addEventListener) {
        el.addEventListener(ev, fn, false);
    } 
    //ie
    else if(window.attachEvent) {
        el.attachEvent('on' + ev, fn);
        el.dettachEvent('on' + ev, fn);
    } 
}

addEvent(textBox, 'focus', function (){
    //cross browser event object
    var e = e || window.event,
        target = e.target;
    //if the text in your text box is your phrase then clean it else leave it untouched
    target.value = target.value === phrase ? "" : target.value;
});

addEvent(textBox, 'blur', function (){
    //cross browser event object
    var e = e || window.event,
        target = e.target;
    //if your text box is not empty then leave it else put your phrase in
    target.value = target.value ? target.value : phrase;
});

score 0 · Answer 7 · answered Sep 03 '13 at 22:10

0

$('.login-inpt').focus(function() {
   $(this).val('');
});
$('.login-inpt').focusout(function() {
   $(this).val('User Name');
});

check out here http://jsfiddle.net/TDUKN/

answered Sep 03 '13 at 22:10

mint

69
4

Want to disapper input textbox default value

7 Answers7

Here is HTML:

Here is JavaScript: