<html> <body> <style> .highlight { background: #FA6; } </style> <p>Логин</p> <input> <p>Пароль</p> <input> <script> var input = document.getElementsByTagName('input')[0]; input.onfocus = function () { this.className = 'highlight'; } input.onblur = function () { this.className = ''; } </script> </body> </html>

SCREENSHOT: s006.radikal.ru/i215/1405/c5/ec7baf58877f.png

  • @Erlotaza, If you are given a comprehensive answer, mark it as correct (click on the check mark next to the selected answer). - Nicolas Chabanovsky ♦

3 answers 3

For such tasks it is better to use pseudo-classes: hover and: focus

    var input = document.getElementsByTagName ('input') [0]; - this is the first element. Do this:

     function cange_class(el) { el.className = 'highlight'; } < input onfocus = "cange_class(this);">;
    • Thank you) But when you click on the second input, the selection from the 1st does not disappear) - Erlotaza
    • Well, you give)) write a function to deselect ... function delete_class (el) {el.className = ''; } <input onfocus = "cange_class (this);" onblur = "delete_class (this)">; - Victor Halauko
    • Thank! (I'm student, I study)) - Erlotaza

    In my opinion, @ SPAHI4 gave an adequate answer, but if according to your problem, I do not advise you to mix html, css, js together, as advised by the respected @ Victor Halauko , and to correct your code as follows:

     var input = document.getElementsByTagName('input'); function classAdd(){ return this.className += ' ' + 'highlight'; } function classRemove(){ return this.classList.remove('highlight'); } for(var i = 0; i < input.length; i++){ input[i].onfocus = classAdd; input[i].onblur = classRemove; }