Изменить цвет фона поля ввода с помощью JS - PullRequest
Новая
       25

Изменить цвет фона поля ввода с помощью JS

0 голосов
/ 18 мая 2018

Я пытаюсь изменить цвет фона поля ввода при фокусировке в JS, когда он не в фокусе, это должен быть просто белый цвет фона.

Я пробовал этот код, но получил ошибку, поэтому я не уверен, что делаю неправильно.

            function navn(obj, evt) {
                if (evt.type == "focus")
                    style.background = "yellow";  //<--what is style?
                else if (evt.type == "blur") {
                    style.background = "white";
                }
            }
 <form>

            <fieldset>
                <legend>Personlige oplysninger</legend>

                <div>
                    <label for="navn">Udfyld dit fornavn:</label>
                    <input type="text" name="navn" class="navn" id="navn" value="" onclick="navn()" placeholder="Dit fornavn" />*
                    <span id="obsnavn" class="alert"></span>
                </div>

                <input type="button" value="Send" id="send" />

            </fieldset>

        </form>

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

В вашем коде есть несколько проблем:

  • ваша функция-обработчик объявляет параметр obj в качестве первого параметра.Когда происходит событие, первый элемент, объявленный в функции-обработчике, является ссылкой на объект события.
  • вы пытаетесь реагировать на blur или focus, но вы используете onclick в своем HTML-теге.
  • чтобы изменить цвет фона вашего элемента, вам нужно изменить его style объект и, в этом style объекте, свойство backgroundColor (JavaScript-эквивалент background-color CSS-свойства).

Вот решение, включающее функцию addEventListener.Позволяет подключить одного и того же слушателя к обоим событиям: blur и focus.

var element = document.getElementById("navn");
element.addEventListener("focus", handler);
element.addEventListener("blur", handler);

function handler(evt) {
    if (evt.type == "focus")
        evt.target.style.backgroundColor = "yellow"; //<--what is style?
    else if (evt.type == "blur") {
        evt.target.style.backgroundColor = "white";
    }
}
<form>
   <fieldset>
      <legend>Personlige oplysninger</legend>
      <div>
         <label for="navn">Udfyld dit fornavn:</label>
         <input type="text" name="navn" class="navn" id="navn" value="" placeholder="Dit fornavn" />*
         <span id="obsnavn" class="alert"></span>
      </div>
      <input type="button" value="Send" id="send" />
   </fieldset>
</form>
0 голосов
/ 18 мая 2018

Потому что ваша функция как параметр, поэтому, когда вы вызываете onclick = "navn ()" без параметров, она не может работать

вызывайте ее так: 

  onblur="blur(this)"  onfocus="focus(this)"

  function blur(obj) {
                obj.style.backgroundColor == "white";
        }
  function focus(obj) {
                obj.style.backgroundColor = "yellow";
        }
...