gpt4 book ai didi

javascript - 将焦点从输入元素更改为动态内容占位符 div

转载 作者:行者123 更新时间:2023-12-03 10:13:21 26 4
gpt4 key购买 nike

在以下 html 中,焦点位于页面加载后的 sample_input 元素上。输入值并按下 Enter 按钮后,ajax 请求将发送到服务器,并且 ajax 请求的响应将附加到 my_dynamic_content div 中。此时如何将焦点转移到动态内容上。

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<script src="/javascripts/vendor/jquery-1.11.0.min.js"></script>
<div>
<input id="sample_input" type="text" placeholder="Type URL" autofocus="autofocus"/>
</div>
<div id="my_dynamic_content"></div>
</body>
</html>

输入按下回调函数中尝试了以下操作,但不起作用

$('#my_dynamic_content').blur();
$("body").attr('tabindex', -1).focus();

最佳答案

您必须为 div 分配一个 tabindex 值,然后指定一种检查何时按下 Enter 键的方法。最简单的方法是将输入包装在带有 id 的表单中,然后捕获 onsubmit 事件并防止表单重定向页面,然后将焦点分配给 div

( Demo )

$("#myFancyForm").on('submit', function(e) {
e.preventDefault();
$("#my_dynamic_content").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id="myFancyForm">
<input id="sample_input" type="text" placeholder="Type URL" autofocus="autofocus" />
</form>
</div>
<div id="my_dynamic_content" tabindex="1">Hello World</div>

关于javascript - 将焦点从输入元素更改为动态内容占位符 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30008841/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com