CODEWITHSUNDEEP
javascriptuiwebviewios5contenteditable
xizor
xizor

Reputation: 1614

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

Upvotes: 5

Views: 4045

Answers (4)

Humayun
Humayun

Reputation: 1006

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.

Upvotes: 7

Ryan Fioravanti
Ryan Fioravanti

Reputation: 21

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

Upvotes: 2

sciritai
sciritai

Reputation: 3758

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

Upvotes: 4

J. K.
J. K.

Reputation: 8368

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

Upvotes: 0

Related Questions