Javascript 使用jQuery在textarea具有焦点时显示隐藏的div？

这是我的小提琴：

出于某种原因，该代码强制第二个文本区域具有自动聚焦，这是我不想要的

我希望用户必须点击它才能获得焦点。当他们点击时，HiddenDiv就会出现

谢谢你的帮助

<textarea></textarea><br><br>

<textarea id = "TextArea"></textarea><br><br>

<div id="HiddenBox"></div>

---

问题是因为您的代码在加载时运行，并针对focus方法运行if语句。此逻辑不正确，因为这将触发焦点事件并返回jQuery对象，这意味着它将始终等于true

要在焦点事件实际触发时运行某些代码，您应该像这样钩住该事件：

$('#TextArea').focus(function() {
    $('#HiddenBox').fadeIn(0);
});

---

请注意，您可以使用“显示”、“隐藏”或“切换”来代替fadeIn0，具体取决于您想要的行为。

您可以使用纯CSS和当前标记来完成此操作

隐藏盒{ 显示：无； } text区域：焦点~HiddenBox{ 显示：块； }

---

* 好吧，有件事。您需要一个用于in和out事件的处理程序

我写了这篇文章，并在你的JSFIDLE中进行了尝试。在javascript框中替换它，它应该可以工作

$("#TextArea").on("focusin", function(){
  $("#HiddenBox").fadeIn();
});

$("#TextArea").on("focusout", function(){
  $("#HiddenBox").fadeOut();
})

我不确定这是否是我们正在寻找的，但我希望它能起作用

问候

$("#TextArea").on("focusin", function(){
  $("#HiddenBox").fadeIn();
});

$("#TextArea").on("focusout", function(){
  $("#HiddenBox").fadeOut();
})