1

Every time I refresh (using timeout) the page, the input value stays the same but the cursor jumps to the start of the value.

I've tried using .click() instead of .focus() it doesn't achieve the results I'd like.

I've added autofocus to the element but that didn't help either.

EDIT: I've noticed this seems to be an issue with Google Chrome browser, I've tried it with Safari and it worked as intended. If anyone has any suggestions to make it work on Chrome, it would be much appreciated.

HTML tags

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

I'd like the value to show in the input bar after each refresh, but the cursor to stay at the end of the input so the user can continue typing from where they left off.

(How usual search bars work where each input value is refreshed so that it displays results of whats in input instantly but if the user makes a mistake they can continue to remove characters from where they left off).

If anyone has any ideas, they would be very welcome. Thanks :)

Dilan
  • 13
  • 5
  • Have a look at the following [Stack Overflow question](https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element) mentioning different techniques of how to achieve your goal. – SaschaM78 Apr 20 '19 at 14:59

2 Answers2

2

You can add to document ready like this, it will move the cursor of input to end.

$(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>
Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
0

The idea is nice, but instead of refreshing the page, make get request to the URL and using jQuery write the results. For example:

  $(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);
    })
})

Using this method, you won't need focusing, because the page won't even reload and the focus will stay on the input...

Sorry for my bad english. I hope you understand and will get this work

Bojmaliev
  • 61
  • 6