How To Preselect Contenteditable Field In Uiwebview Ios5

First of all I know contenteditable is only iOS 5 I have accounted for this - we are giving users with iOS 5 a feature to allow Rich Text pasting using contenteditable. This featur

Solution 1:

Now if anyone wants to achieve this in iOS 6, he can open iOS keyboard programmatically like this,

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.// keyboardDisplayRequiresUserAction available in iOS >= 6 if ([webView respondsToSelector:@selector(setKeyboardDisplayRequiresUserAction:)]) {
        webView.keyboardDisplayRequiresUserAction = NO;
    }
}

and then,

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // Assuming that you're using jquery. If not, use document.getElementById('YourInputElementID')NSString *evalStr = [NSString stringWithFormat:@"setTimeout( function(){$('#YourInputElementID').focus();},1000);"];
    [webView stringByEvaluatingJavaScriptFromString:evalStr];
}

This will run this javascript after 1sec. For safe side you should call the get focus code when the focusing element has been loaded.

Solution 2:

Unfortunately you can't do that in Mobile Safari. I believe Apple chose to restrict this from happening because when you visit some sites, like Google for example, the search field gets focused immediately. This would be extremely annoying for users if every site they went to, the keyboard popped up. On Desktop this behaviour doesn't matter but on mobile devices it's very noticeable.

Related: Mobile Safari Autofocus text field

Solution 3:

You can summon the keyboard if you are in the context of a click event handler.

For example

document.body.addEventListener('click', function() {
  content.focus();
}, false);

should work

Solution 4:

I have no info about contenteditable on iOS but I think that you should be able to simply create a range and add it to the selection.

var input; // your contenteditable elementvarrange = document.createRange();
range.selectNodeContents(input);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);