.focus（）和onfocus =“this.value = this.value”在刷新后没有将光标移动到输入的末尾

Question

每次刷新（使用超时）页面时，输入值保持不变，但光标跳转到值的开头。

我尝试使用.click()而不是.focus()它没有达到我想要的结果。

我已经添加了autofocus元素，但这也没有帮助。

编辑：我注意到这似乎是谷歌Chrome浏览器的问题，我已经尝试使用Safari，它按预期工作。如果有人有任何建议让它在Chrome上运行，我们将不胜感激。

HTML标签

<div class="searchContainer">
    <h4>Find your favourite songs, artist or albums.</h4>
    <input type="text" id="searchBar" class="searchBar" autofocus value="<?php echo $query; ?>" onfocus="this.value = this.value;" placeholder="Enter your search here">
</div>

JavaScript的

<script>

    $(".searchBar").focus();

    $(function() {
        // refreshes page on each time user types a word after 2000ms (2s)
        var refresh;
        $(".searchBar").keyup(function() {
            clearTimeout(refresh);
            //restarts refresher to wait for user to finish typing
            refresh = setTimeout(function() {
                var value = $(".searchBar").val();
                changePage('search.php?query=' + value);
            }, 2000);
        })
    })

</script>

我想在每次刷新后在输入栏中显示该值，但是光标将保留在输入的末尾，以便用户可以从他们中断的位置继续输入。

（通常的搜索栏如何在每个输入值刷新的情况下工作，以便它立即显示输入中的结果，但如果用户犯了错误，他们可以继续从他们中断的位置删除字符）。

如果有人有任何想法，他们将非常欢迎。谢谢 ：）

Answer 1

您可以像这样添加到文档中，它会将输入的光标移动到结尾。

$(document).ready(function(){
        $(".searchBar").focus();
        var search = $(".searchBar").val();
        $(".searchBar").val('');
        $(".searchBar").val(search);
    })

//$(".searchBar").focus();

    $(function() {
        // refreshes page on each time user types a word after 2000ms (2s)
        var refresh;
        $(".searchBar").keyup(function() {
            clearTimeout(refresh);
            //restarts refresher to wait for user to finish typing
            refresh = setTimeout(function() {
                var value = $(".searchBar").val();
                changePage('search.php?query=' + value);
            }, 2000);
        })
    })
	
	$(document).ready(function(){
		$(".searchBar").focus();
		var search = $(".searchBar").val();
		$(".searchBar").val('');
		$(".searchBar").val(search);
	})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchContainer">
    <h4>Find your favourite songs, artist or albums.</h4>
    <input type="text" id="searchBar" class="searchBar" autofocus value="Hien" placeholder="Enter your search here">
</div>

Answer 2

这个想法很好，但是不是刷新页面，而是对URL进行get请求并使用jQuery编写结果。例如：

  $(function() {
    var refresh;
    $(".searchBar").keyup(function() {
        clearTimeout(refresh);
        //restarts refresher to wait for user to finish typing
        refresh = setTimeout(function() {
            var value = $(".searchBar").val();
            //changePage('search.php?query=' + value);  Instead of this
            $.get('search.php?query=' + value, function(data){
                $("#results").html(data); /// write the results directly.
            });
        }, 2000);
    })
})

使用这种方法，你不需要聚焦，因为页面甚至不会重新加载，焦点将保留在输入上...

对不起，我的英语不好。我希望你理解并将得到这项工作