Keep iOS keyboard open while keyup function runs

Question

This question is about iOS web dev.

I have a function which is fired by a keyup listener in a "Search" input field. It works perfectly on a Desktops, Laptops, Samsung Galaxy phones and the Sony Xperia but not in iPhone or iPad. Whenever the function runs, the soft keyboard closes. One potential fix I thought of was to re focus on the input id='newsearch' as the last line of the function, but that didn't seem to do anything.

Does anyone know how to keep the keyboard open while the function is running in ios?

See 3 code snippets below:

The lines that trigger the function:

<tr><td colspan='3'>Search <input type='text' autofocus id='newsearch'></input></td>

    <h2>Search Results</h2>
    <div id="newsearch-data"> </div>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>
<script src="addplayer.js"> </script>

The function itself: addplayer.js

$('input#newsearch').on('keyup', function(){
    var newsearch = $('input#newsearch').val();
    if ($.trim(newsearch)!= "") {
        $.post('newsearch.php', {newsearch: newsearch}, function(data) {
            $('div#newsearch-data').html(data);
        });
    }
});
            document.getElementById("newsearch").focus();

The php file the function refers to: newsearch.php

if (isset($_POST['newsearch']) && $_POST['newsearch'] != NULL){
    require 'dbconnect.php';

    $term = $_POST['newsearch'];
    $terms = "%" . $term . "%";

    $_SESSION['players'] = array();

    $query = ("SELECT * FROM players WHERE Username LIKE '$terms' OR Phonenumber LIKE '$terms' OR PlayerID LIKE '$terms'");
    $run_query = mysqli_query($dbcon, $query);

        echo "<table border='1px'><tr><th>Player ID</th><th>Name</th><th>Action</th></tr>";

            while ($dbsearch = mysqli_fetch_assoc($run_query))
             {
                $dbu = $dbsearch['Username'];
                $id = $dbsearch['PlayerID'];
                $func = "add(" . $id . ", Brad Henry )";
             array_push ($_SESSION['players'],$dbsearch['PlayerID']);
             echo "<tr><td>".$id ."</td><td>".$dbu."</td><td><input type=\"submit\" id=\"PlayerAdded".$id."\" autofocus value=\"Add\" onclick=\"add('".$id."','".$dbu."');\"></input></td></tr>";
             }

Frenchman

What version of iOS are you running? Works fine for me when I open this page in iOS 8. codepen.io/hampusohlsson/pen/mejMpw – Aurelioaurelius

@hamohl I am on ios 9, but it's been getting tested on various iOS devices. It is running the search, but the keyboard closes about half a second after the first keyup, so when searching a name with 15 or so characters it closes the keyboard about 5-7 times and the user has to deselect the search input each time. Which device are you using? – Frenchman

I'm using iPhone 5S iOS8. You can try to use a Timeout to prevent it from sending multiple requests before you are finished typing, at least to see if it helps. Check out the updated pen above :) – Aurelioaurelius

Answer 1

I can't believe this took me so long to realize. The last 'echo' in newsearch.php contains the autofocus attribute on the add button.... I removed that and now it works.

Frenchman

Answer 2

Try to set focus on field.

$('input#newsearch').on('keyup', function(){
    var field = $(this);
    var newsearch = field.val();
    if ($.trim(newsearch)!= "") {
        $.post('newsearch.php', {newsearch: newsearch}, function(data) {
            $('div#newsearch-data').html(data);
            field.focus();
        });
    }
});

Cardialgia

I really appreciate the suggestion, but I just tested it and it didn't seem to make a difference to be honest. – Frenchman