尝试在两个div之间切换显示，然后将焦点放在新可见的div中包含的文本区域上
我有两个包含textareas的divs。其中一个默认设置为display= block;，另一个在我单击链接时设置为display: none;
<a href='#' onclick='showFunction()' name='reply'>Reply</a>
我想要将默认输入设为display: none;，另一个设为display: block;。我还希望将重点放在显示的输入上(它将位于滚动的底部)，以便用户可以开始键入。我的jquery充其量也是很弱的，所以下面是我所拥有的：
var id = '<?php echo $blog_comment_id; ?>';
function showFunction() {
var x = document.getElementById(id);
var y = document.getElementById('#top_input');
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
y.style.display = "none";
document.getElementById('#focus_here').focus();
}现在，隐藏输入显示，默认情况下由id="top_input"表示的输入不执行任何操作，并且它不关注表示为id="focus_here"的textarea。
下面是divs的相应html。第一个是默认显示：
<div class='post-comments-list' style="overflow: hidden; display: block;" id="top_input">
<div class='pw-box add-comment-box' style="margin-top: 2px !important; background: #f7f7f7;">
<form action="blog_comment_frame.php?post_id=<?php echo $post_id; ?>" id="comment_form" name="postComment<?php echo $post_id; ?>" method="POST">
<textarea class='post-textarea' name="post_body" required="required" placeholder="Comment here..."></textarea>
<div class='pw-box-btn'>
<button class='post-button button' name="postComment<?php echo $post_id ?>" value="ADD">
Post
</button>
</div>
</form>
</div><br> 另一种是不显示：
<div class='post-comments-list' id="<?php echo $blog_comment_id; ?>" style="overflow: hidden; display: none;">
<div class='pw-box add-comment-box' style="margin-top: 2px !important; background: #f7f7f7;">
<form action="blog_comment_frame.php?post_id=<?php echo $post_id; ?>" id="comment_form" name="postComment<?php echo $post_id; ?>" method="POST">
<textarea class='post-textarea' id="focus_here" name="post_body" required="required" placeholder="Comment here..."></textarea>
<div class='pw-box-btn'>
<button class='post-button button' name="postComment<?php echo $post_id ?>" value="ADD">
Post
</button>
</div>
</form>
</div>
</div>我已经尽了最大的努力从其他帖子中拼凑起来；这是我唯一能做的，因为jquery不在我的指尖上，但不幸的是，它仍然不能正常工作。任何帮助/参考都将不胜感激。
更新
正如评论中提到的，我不需要传递#符号，所以我删除了它。现在，我试图让它聚焦在textarea上，同时滚动到底部，因为我不确定单独聚焦是否会自动滚动到该位置。textarea总是在底部，所以为什么不呢？
下面是新的代码：
var id = '<?php echo $blog_comment_id; ?>';
function showFunction() {
var x = document.getElementById(id);
var y = document.getElementById('top_input');
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
y.style.display = "none";
// document.getElementById('focus_here').focus();
// $("#reply").click(function(){
// $(this).next("#comment_form_see").find("textarea").focus();
// return false;
// });
window.setTimeout(function(){
document.getElementById("focus_here").focus();
},0);
var iframe = $('#iFrameAutocast').contents();
iframe.scrollTop(880);
}我得到的结果是默认的div消失了，隐藏的div如期出现。然而，我并不是专注于textarea，也不是滚动到底部。我尝试了另一种已被注释掉的焦点方法。这也不管用。
回答 2
Stack Overflow用户
发布于 2019-04-12 01:06:20
首先，正如评论中提到的，getElementById需要一个ID，这样您就可以去掉#符号。
其次，有一个奇怪的解决方案来解决焦点不起作用的问题，它使用了setTimeout。显然，焦点命令并不是在所有浏览器和所有情况下都能按预期工作。
window.setTimeout(function(){
document.getElementById("focus_here").focus();
},0);Stack Overflow用户
发布于 2019-04-12 08:51:54
如果对其他人有帮助，我会给出答案的。我将上面的<a>标记更改为：
<a href='#' onclick='showFunction($blog_comment_id)' name='reply'>Reply</a>将数据传递给函数也是如此。然后我修改成这样：
function showFunction(id) {
var x = document.getElementById(id);
var y = document.getElementById("top_input");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
y.style.display = "none";
window.setTimeout(function(){
document.getElementById("focus_here" + id).focus();
},0);
}功能与预期一致。我越来越多地使用这个东西，是时候上课了！
https://stackoverflow.com/questions/55636712
复制相似问题