我的输入 html 元素很少。在输入的更改事件(制表符)上,我制作一个ajax帖子并返回html。然后我用这个新的 html 替换现有的 html。这样做会失去对下一个输入元素的关注。 然而,在我进行 ajax post 之前,我会存储当前聚焦元素的 id,以便我可以在替换 html 后重新聚焦相同的输入。但它不起作用
下面是我的代码
<div id="mycontainer">
<input id="input1" />
<input id="input2" />
<input id="input3" />
</div>
$(function () {
$("input").change(function () {
$.ajax(
{
data: "somedata",
url: "someurl",
method: "POST"
})
.done(function (response) {
var currentElement = $(':focus').attr("id");
$("#mycontainer").html(response)
$("#" + currentElement).focus();
})
})
})
最佳答案
更改事件在模糊事件之后触发,因此焦点已移动。如果您想关注已更改的元素,可以使用 event.target
获取对已更改的输入的引用。
$("input").change(function (event) {
$.ajax({
data: "somedata",
url: "someurl",
method: "POST"
}) .done(function (response) {
var currentElement = event.target.id;
$("#mycontainer").html(response)
$("#" + currentElement).focus();
});
})
如果您希望焦点保持在原来的位置,您的代码应该可以工作,这是证明。
const HTML = `
<input id="input1" />
<input id="input2" />
<input id="input3" />
`;
$(() => {
$("input").change(() => {
// Add async code to fake ajax
new Promise((resolve, reject) => {
setTimeout(() => resolve(HTML), 100);
}).then(response => {
const currentElement = $(':focus').attr("id");
$("#mycontainer").html(response)
$("#" + currentElement).focus();
});
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mycontainer">
<input id="input1" />
<input id="input2" />
<input id="input3" />
</div>
但是,正如我的评论中提到的,这是一种糟糕的方法,因为您丢失了处理程序,因此您还必须重置处理程序,也许还需要重置滚动位置。为了避免这种情况,您可以让 AJAX 返回数据并仅更新需要更新的位。
关于javascript - 重新加载html后如何重新聚焦输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42287213/