同一页面上的多个表单专注于提交前的相同输入

Question

我有一个问题，我在同一页面上有多个表单，并且我想在提交表单之前将相同的输入字段集中在它所在的位置但是如果我提交然后从那个地方丢失焦点。 我正在使用更多具有相同字段的表单。比如销售项目销售字段项目名称，项目价格，项目数量，当我更改数量然后提交该表单我想要在重新加载页面焦点保持在相同的数量字段 这是两种不同的形式，当我更改拳头字段的数量然后提交此表单我希望它将重新加载页面后将重点放在相同的字段 请帮助我。

Answer 1

每次使用JS sessionstorage API单击一个时，尝试缓存焦点输入字段。

var els = $('input, select');
els.each(function(i){
    $(this).on('focus', function(){
        sessionStorage.setItem('focused', i);
    })
})

然后当页面重新加载时，从sessionstorage中获取条目并将焦点放在同一元素上。

$(function(){
    var index = parseInt(sessionStorage.getItem('focused'));
    var els = $('input, select');
    $(els[index]).focus();
})

更强大的解决方案是缓存输入字段的唯一ID（如果有）而不是索引编号。这样你就可以将一个事件附加到身体上，并倾听焦点。

$('body').on('focus', 'input, select', function(e){
    sessionStorage.setItem('focused', e.target.id);
});

然后在页面加载

上获取缓存的id

$(function(){
    var id = sessionStorage.getItem('focused');
    $('#'+id).focus();
})