bringing up iOS keyboard with focus()

Question

I'm working on a jquery crossword puzzle plugin and for the iOS version I have it so that when a cell is clicked a function is called which uses .focus() to being up the touch screen keyboard. I also have it set up so that when a letter key is pressed it will move to the next cell and call that same click event and be ready for input. This works fine on PC but for some reason a regular click brings up the keyboard but not when it's called after pressing a key. The cells are divs withn an input tag inside.

Here's my code:

function cellClick( event )
{

moveToCell( "#" + event.currentTarget.id );

_cwo.onWord = false;
var dir = getNewDirection(_cwo.currRow, _cwo.currCol);
_cwo.direction = dir;

alignClue( "A", _cwo.clues["across"] );
alignClue( "D", _cwo.clues["down"] );

};

function moveToCell( id ) // put the cursor in the given cell
{
  $( _cwo.currCell).css( 'background-color', 'white');
  $( id).css( 'background-color', _cwo.currentCellColor );

  _cwo.currRow = $(id).data('row');
  _cwo.currCol = $(id).data('col');
  _cwo.currCell = "#" + cellID( _cwo.currRow, _cwo.currCol );
  $(_cwo.currCell).focus();

};


function keyUp( event )
{

if ( event.currentTarget.tagName != "HTML" ) return;

if(event.which == 13){
    var dir = getDirection(_cwo.currRow, _cwo.currCol);
    if(dir == "across")goAcross(true);
    else
    goDown(true);
}

if (
( 32 == event.which ) ||
( ( 64 < event.which ) && ( event.which < 91 ) ) ||
( ( 96 < event.which ) && ( event.which < 123 ) )
)
{

_char = codeToChar( event.which );
if ( _char == _cwo.NA ) return;
$( _cwo.currCell).data( 'player', _char );
paintCell( _cwo.currCell, 'player');


if( _cwo.direction == 'across')goAcross( false ); 
if( _cwo.direction == 'down')goDown();
}


alignClue( "A", _cwo.clues["across"] );
alignClue( "D", _cwo.clues["down"] );
$("#" + cellID( _cwo.currRow, _cwo.currCol )).click();   //calls cellClick

};

//Will prevent keys from being repeated on input
$('*').keydown(function(e){
    e.preventDefault();
});

score 0 · Answer 1 · edited May 23 '17 at 10:26

This seems to be the same issue that I've been having, and that has also been discussed here: Mobile Safari Autofocus text field

The upshot from that discussion is that the lack of being able to focus elements programmatically is a deliberate design decision, and stems from this property on the UIWebView class within iOS: https://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/occ/instp/UIWebView/keyboardDisplayRequiresUserAction

One interesting note there is that web "apps" added to the homescreen are by default allowed to bypass this restriction.

It is possible to have a button click (actual tap event initiated by the user) event then call a .focus(); event. If you programmatically call the click handler - even from eg. within a keyboard event handler such as pressing a key, iOS will focus the field but dismiss the keyboard.

I was working on some test experiments here whilst researching the issue: http://codepen.io/anon/pen/FLpJD

And in all cases you can see the button allows you to focus the second field on an iOS device, but not by the keyPress event with any variation that I tried.

So it seems that - for the time being at least - this is unsolvable. If Apple were to relax the key press events in the same way as they relaxed the click event, that would be ideal.

bringing up iOS keyboard with focus()

1 Answers1