时间戳

首页 > 解决方案 > 使用 JavaScript 检测光标何时不再位于文本区域中

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

问题描述

我想要做的是一个 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。我想要的是，当我在 textArea 中输入任何内容并单击页面的任何部分（即使没有参考，按钮......，让我们用“纯文本”说）时，背景颜色已更新。

标签： javascripthtmltextareadom-eventsjquery-events

解决方案

只需使用 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>

推荐阅读