Тип ввода: отделение кода Javascript от кода внешнего интерфейса - PullRequest
Новая
       3

Тип ввода: отделение кода Javascript от кода внешнего интерфейса

1 голос
/ 18 августа 2010

Ниже приведен код в html-файле. Каков идеальный способ отделить код JavaScript (если (this.value и т. Д.)) От HTML-файла? 

input type="text" name="username" onblur="if (this.value == '')  {this.value = 'email';}" onfocus="if (this.value == 'email') {this.value = '';}"

Ответы [ 2 ]

1 голос
/ 18 августа 2010 
<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>

Если вы хотите поместить содержимое JavaScript во внешний файл:

HTML-файл: 

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

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

Ссылки по теме: элемент скрипта ,
onblur event ,
Событие onfocus .

1 голос
/ 18 августа 2010 
<!doctype html>
<html><head>
<script src="file.js"></script></head><body>
<input id="foo" type="text">
</body></html>

Метод № 1:

в file.js, на который вы ссылаетесь в <head> с <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 = ''; } }
}

И в идеале вы хотели бы использовать функцию addEvent, которая поддерживает прослушиватели dom.

Метод № 2:

(возможно) более элегантный способ: 

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(){});

});

Метод № 3:

Вы также можете избежать всей бессмыслицы onload и addEvent и просто поставить свой скрипт перед тегом end body, если это довольно упрощенный сайт. 

<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 = ''; } }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...