5

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 feature works great so far all I want to do is when the view appears to set the contenteditable field as active (pre-select it) so that the keyboard appears and the user can begin typing right-away. Here is the local html file I am using for the UIWebView

<html>
    <body>
        <div id="content" contenteditable="true" style="font-family: Helvetica">PLACEHOLDER</div>
    </body>
</html>

I have already tried using some javascript to accomplish this using tutorials that I found for preselecting a text input. I could not get this to work, even when I tried to switch to a text input field for testing. This is probably due to my inexperience with javascipt so if that is the solution please be explicit (as I am completely unfamiliar with javascript).

Thanks for any help

xizor
  • 1,554
  • 2
  • 16
  • 35

4 Answers4

7

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.

Humayun
  • 976
  • 7
  • 13
  • Setting `keyboardDisplayRequiresUserAction` in InterfaceBuilder didn't work for me but adding it in code fixed it. If the code above doesn't work for someone reading, make sure that the property is actually set at runtime. – tharkay Aug 11 '16 at 17:40
4

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

Community
  • 1
  • 1
sciritai
  • 3,688
  • 1
  • 17
  • 22
2

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

Ryan Fioravanti
  • 21
  • 1
  • This works! The actual behaviour is slightly more permissive than this (there are other occasions/events that let you focus a contentEditable), but it's so bizzare and unpredictable it's not really worth documenting. – aaaidan Jan 16 '14 at 04:16
0

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 element
var range = document.createRange();
range.selectNodeContents(input);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
J. K.
  • 8,268
  • 1
  • 36
  • 35