I have an input field like this:

 <input class="" type="text" id="Name_11_1" name="Name" value="Your name:">

And want to change it into this:

<input class="" type="text" id="Name_11_1" name="Name" value="Your name:" onblur="this.value = this.value || this.defaultValue;" onfocus="this.value == this.defaultValue && (this.value = '');"Your name:">

The problem is that I CAN'T edit the input field directly and have to use an external JavaScript code.

I have an input field like this:

 <input class="" type="text" id="Name_11_1" name="Name" value="Your name:">

And want to change it into this:

<input class="" type="text" id="Name_11_1" name="Name" value="Your name:" onblur="this.value = this.value || this.defaultValue;" onfocus="this.value == this.defaultValue && (this.value = '');"Your name:">

The problem is that I CAN'T edit the input field directly and have to use an external JavaScript code.

• javascript
• html
• dom
• dom-events

Share Improve this question Follow edited Jul 14, 2022 at 12:25 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 27, 2013 at 11:11 NewbieNewbie 15222 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

With jQuery:

   <script src="http://code.jquery./jquery-1.9.1.min.js"></script>
    <script>
        $(function() {
            $('#Name_11_1').blur(function() {
                $(this).val(YOUR_EXPR); 
            });

            $('#Name_11_1').focus(function() {
               $(this).val(YOUR_EXPR); 
             });
        });
    </script>

First remove the existing event handlers and then attach your own:

var obj = document.getElementById('Name_11_1');

obj.removeAttribute('onfocus');
obj.removeAttribute('onblur');

obj.addEventListener('blur', function() {
    // your js code for blur event
});
obj.addEventListener('focus', function() {
    // your js code for focus event
});

If the browser understands the placeholder attribute on input tags, you can use that:

<input id="foo" name="foo" placeholder="Your name">

You can then add JavaScript to provide a fallback for other browsers:

if (!'placeholder' in document.createElement('input')) {
    $('#foo').on('focus', function() {
        // your code
    }).on('blur', function() {
        // your code
    });
}

UPDATE: forgot that the OP can't edit the input tag directly. In that case, the code snippet can be modified to something like this:

var elem = $('#Name_11_1'),
    defaultValue = 'Your name';

if ('placeholder' in document.createElement('input')) {
    elem.attr('placeholder', defaultValue);
} else {
    elem.on('focus', function() {
        // your code
    }).on('blur', function() {
        // your code
    });
}