Определить, когда курсор больше не находится в текстовой области с помощью JavaScript - PullRequest
Новая
       34

Определить, когда курсор больше не находится в текстовой области с помощью JavaScript

2 голосов
/ 16 марта 2020

Я хочу сделать HTML файл, который определяет, написано ли в textArea что-то написанное или нет. Чтобы показать это, я изменяю цвет фона, поэтому серый цвет используется, когда textArea пусто, и белый, когда на нем что-то написано.

С этой целью я разработал следующий код: 

function prueba() {
    if (document.getElementById("text_1_3").value != "") {
        document.getElementById("text_1_3").style.background = "white";
    } else {
        document.getElementById("text_1_3").style.background = "rgb(174,170,170)";
    }
}
Text Area: <textarea id="text_1_3" style="background-color:rgb(174,170,170)" onclick="prueba();"></textarea>

Основная проблема, с которой я столкнулся с этим кодом, заключается в том, что для обновления цвета фона мне всегда приходится нажимать на текстовую область. И то, что я хотел бы, это то, что, когда я закончил печатать что-либо в textArea, и я нажимал на любую часть страницы (даже если нет ссылки, кнопка ..., скажем, в «обычном тексте»), цвет фона обновляется.

Ответы [ 2 ]

2 голосов
/ 16 марта 2020

Просто используйте CSS для изменения цвета, JavaScript не требуется. 

textarea:focus {
  background-color: #FFF;
}
 
textarea { 
  background-color: rgb(174,170,170)
}
<textarea></textarea>

Если вы хотите сделать это с JavaScript, вам следует использовать слушатели событий фокусировки и размытия, а не щелкать. 

var ta = document.querySelector("textarea")
ta.addEventListener("focus", function () {
  ta.style.backgroundColor = "#FFF"
})

ta.addEventListener("blur", function () {
  ta.style.backgroundColor = "rgb(174,170,170)"
})
<textarea></textarea>
1 голос
/ 17 марта 2020

Исходя из ответа @epascarello и внесения некоторых изменений, я получаю то, что хотел! Вот код: 

<html>
Text Area: <textarea id="text_1_3" style="background-color:rgb(174,170,170)" onclick="prueba();"></textarea>
</html>
<script>
    var ta = document.querySelector("textarea")     
    ta.addEventListener("blur", function () {
        if (document.getElementById("text_1_3").value != "") {
            document.getElementById("text_1_3").style.background = "white";
        }
        else{
            document.getElementById("text_1_3").style.background = "rgb(174,170,170)";
        }
    })
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...