Question

我输入的html元素很少。在输入的更改事件（制表符）我做一个ajax帖子并获得回复html。然后我用这个新的html替换现有的html。这样做会失去对下一个输入元素的关注。然而，在我制作ajax post之前，我正在存储当前聚焦元素的id，这样我可以在替换html后重新聚焦相同的输入。但它不起作用

下面是我的代码

.sidebar

    {

        float:left;
        position: absolute;
        top:0px;
        left:0px;
        background-color: #E0E0E0;
        width:200px;
        height: 100%;

    }

Answer 1

模糊事件后更改事件触发，因此焦点已移动。如果您想关注已更改的元素，可以使用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返回数据并仅更新需要更新的位。

Answer 2

当您单击页面上的某个位置（包括加载ajax内容的按钮/链接）时，单击的元素会立即获得焦点。所以在更改html之前，存储焦点ID已经太晚了。你需要将它存储在焦点变化上。

修改由于没有点击＆＃39;参与OP的问题，我提出了上述解决方案的更新版本：存储已更改的输入并在焦点处理程序中运行ajax内容。

＆＃13;
＆＃13;
let changedInput; $(document).on('focus', 'input', function() { if (changedInput) { // do whatever with changedInput.val() needed here changedInput = null; const currentElement = $(this).attr('id'); $.ajax({ data: "somedata", url: "someurl", method: "POST" }) .done(function(response) { $("#mycontainer").html(response); $("#" + currentElement).focus(); }) } }); $(document).on('change', 'input', function() { changedInput = this; }) /* BEGIN FAKE AJAX STUFF * */ let counter = 0; $.ajax = function(params) { $('#msg').text("Fake AJAX Loading..."); return { done: function(cb) { setTimeout(function() { $('#msg').text(""); cb(` <div id="mycontainer"> <input value="${counter}" id="input1" /> <input value="${counter}" id="input2" /> <input value="${counter++}" id="input3" /> </div> `); }, 300); } } } /* END FAKE AJAX STUFF */
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height:20px;" id="msg"></div> <div id="mycontainer"> <input value="" id="input1" /> <input value="" id="input2" /> <input value="" id="input3" /> </div>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: