当textarea使用jQuery聚焦时，会出现隐藏的div？

Question

这是我的小提琴：http://jsfiddle.net/neowot/mmtk7wzp/

由于某种原因，代码强制第二个textarea具有自动焦点，我不想要。

我希望用户必须点击它才能获得焦点。当他们点击时，<textarea></textarea><br><br> <textarea id = "TextArea"></textarea><br><br> <div id="HiddenBox"></div> 应该出现。

任何帮助表示感谢。

#HiddenBox {
    background:red;
    width:50px;
    height:50px;
    display:none;
}

#TextArea {
}

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

delete

Answer 1

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

要在focus事件实际触发时运行一些代码，您应该像这样挂钩该事件：

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

Updated fiddle

请注意，您可以使用show()，hide()或toggle()代替fadeIn(0)，具体取决于您想要的确切行为。

Answer 2

您可以使用当前标记的纯CSS来完成。

#HiddenBox {
    display: none;
}
#TextArea:focus ~ #HiddenBox {
    display: block;
}

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

<br><br>

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

Answer 3

好的，有一件事。你需要一个进出事件的处理程序。

我写了这个并在你的jsFiddle中尝试过。在javascript框中替换它，它应该工作。

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

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

我不确定这是否是我们正在寻找的，但我希望它有效。

的问候。