Question

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

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

我已将autofocus添加到元素中，但这也无济于事。

编辑：我已经注意到这似乎与Google 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

这个想法很好，但是与其刷新页面，不如对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);
    })
})

使用此方法，您将不需要聚焦，因为页面甚至都不会重新加载，并且聚焦将停留在输入上...

对不起，我英语不好。希望您能理解并获得这份工作

Answer 2

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

$(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>

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

2 个答案: