使用 JavaScript 检测光标何时不再位于文本区域中

Question

我想要做的是一个 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 中输入完任何内容并单击页面的任何部分时（即使没有引用，按钮......，让我们在 "plain text" 中说），背景颜色已更新。

Answer 1

只需要CSS改变颜色，不需要JavaScript。

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

<textarea></textarea>

如果你想用 JavaScript 做到这一点，你应该使用 focus 和 blur 事件监听器，而不是点击。

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>

Answer 2

根据@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>

使用 JavaScript 检测光标何时不再位于文本区域中

Detect when the cursor is no longer in the textarea with JavaScript

html

javascript

textarea

dom-events

jquery-events