javascript - 重新加载html后如何重新聚焦输入元素

标签 javascript jquery

我的输入 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/

相关文章:

javascript - 根据内容的宽度和高度调整弹出窗口的大小

javascript - 如何从 prepend/append 中获取变量数据并使用 jquery 进行加法

JavaScript 代码重构和 fadeIn 属性

javascript - 为什么这个错误/错误出现在 Angular 上

php - POST 变量没有改变

javascript - 日期选择器 : Datepicker on Modal (z-index)

javascript - jquery数据表日期时间列排序

jquery - 最简单的增加 - 使用 jquery 减少选择区域中的值选项

javascript - 使用 jQuery 和 DataTable 进行表行切换()

javascript - 为什么测试框架的语法如此奇怪?