ansaurus

Question

Input Type: Separating Javascript Code From Front End Code

Answer 1

+1 A:

<!doctype html>
<html><head>
<script src="file.js"></script></head><body>
<input id="foo" type="text">
</body></html>

Method #1:

in file.js which you reference in the <head> with a <script>:

window.onload = function() {
 var input = document.getElementById('foo');
 input.onfocus = function() { if ( this.value == '' ) { this.value = 'blah';} }
 input.onblur = function() { if ( this.value == 'blah') { this.value = ''; } }
}

And ideally you'd want to use an addEvent function which supports dom listeners.

Method #2:

The (arguably) more elegant way would be:

var addEvent = (function() {
function addEventIE(el, ev, fn) {
    return el.attachEvent('on' + ev, function(e) {
    return fn.call(el, e);
    });
}
function addEventW3C(el, ev, fn) {
    return el.addEventListener(ev, fn, false);
}
return window.addEventListener ? addEventW3C:addEventIE;
})();

addEvent(window, 'load', function() {
    var input = document.getElementById('foo');
    addEvent(input, 'blur', function(){});
    addEvent(input, 'focus', function(){});

});

Method #3:

You can also avoid the whole onload and addEvent nonsense and just put your script before the end body tag if it's a fairly simplistic site.

<script src="file.js"></script>
</body>

file.js:

 var input = document.getElementById('foo');
 input.onfocus = function() { if ( this.value == '' ) { this.value = 'blah';} }
 input.onblur = function() { if ( this.value == 'blah') { this.value = ''; } }

meder 2010-08-18 15:44:18

For method 1, what would it look like if you had two fields?

thesimpledesigner 2010-08-18 16:04:26

`document.getElementsByTagName('input')` and a for loop. Should've told me about it first :(

meder 2010-08-18 16:06:33

Will this work:window.onload = function() { var input = document.getElementsByTagName('input'); for(var k = 0; k < input.length; k++) { var inputs = input[k]; if(inputs.id = 'userName') { inputs.onfocus = function() { if ( this.value == 'email' ) { this.value = '';} } inputs.onblur = function() { if ( this.value == '') { this.value = 'email'; } } } else if(inputs.id = 'passWord') { inputs.onfocus = function() { if ( this.value == 'password' ) { this.value = '';} } inputs.onblur = function() { if ( this.value == '') { this.value = 'password'; } } } }}

thesimpledesigner 2010-08-18 16:22:48

Just figured it out, sorry about the messy code. Thanks again meder. Great help.

thesimpledesigner 2010-08-18 16:29:04

Answer 2

A:

<head> 
    <script type="text/javascript">  
        function ClearDefValue (input) { 
            if (input.value == '')  {
                input.value = input.defaultValue;
            }
        } 
        function SetDefValue (input) { 
            if (input.value == input.defaultValue) {
                input.value = '';
            }
        } 
    </script> 
</head> 
<body> 
    <input type="text" name="username" value="email" onblur="ClearDefValue (this)" onfocus="SetDefValue (this)" /> 
</body>

If you want to put the JavaScript content into an external file:

HTML file:

<head> 
    <script type="text/javascript" src="utils.js"></script>
</head> 
<body> 
    <input type="text" name="username" value="email" onblur="ClearDefValue (this)" onfocus="SetDefValue (this)" /> 
</body>

utils.js file:

function ClearDefValue (input) { 
        if (input.value == '')  {
            input.value = input.defaultValue;
        }
} 
function SetDefValue (input) { 
        if (input.value == input.defaultValue) {
            input.value = '';
        }
}

Related links: script element,
onblur event,
onfocus event.

gumape 2010-08-18 15:57:47

ansaurus

tags:

views:

answers:

Input Type: Separating Javascript Code From Front End Code

related questions