Rectangle 27 1

You have to use the "click" event to open the keyboard:

$(document).live('click', function() {
    $("#input-element-id").focus();
});

input focus in jquery mobile, but keyboard doesn't appear - Stack Over...

keyboard jquery-mobile cordova
Rectangle 27 4

None of the previous solutions worked for me. However, I noticed that $('textarea').focus().select(); worked after I access the page a second time. So, I force the jquery mobile to data-prefetch my comment box page.

$('#comment-box-page').live('pageshow', function () {
   $('textarea').focus().select();
});

On the list page there is a fake image of a small text box, that redirects to comment-box.html, which is just a big test area with post and cancel buttons.

<div data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
        <div data-role="fieldcontain">
            <a href="comment-box.html" data-prefetch><img src="fake-textfield.jpg"/>
            </a>
        </div>
    </div>
  • data-prefetch is what is making the difference. When you click the link, the page will behave as it was the second time you visited it, enabling focus and bringing the keyboard up.

Would there be any way you could paste a working example of this on jsfiddle, etc or at least a whole basic example on here that I can see how it works - I couldn't quite get your example working.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

input focus in jquery mobile, but keyboard doesn't appear - Stack Over...

keyboard jquery-mobile cordova
Rectangle 27 0

If you are using jQuery Mobile- then you'll probably want to check out some the mobile oriented datepickers out there. I am using the experimental jQueryUI mobile datepicker (from alpha 4) after trying out several of the others because we wanted a nice calendar view. It basically just adds a few css classes added on top of the existing datepicker. I am using the Edited version so it works as a popup. To prevent the keypad opening I simply add a jQuery blur event $this.blur() right after it receives focus before the picker is shown. The blur event happens fast enough that the keyboard never opens.

If not- You'll probably want to do the same thing. I'm not aware of a way to do it without editing the code though.

mobile - Disable setting of focus for jQuery UI datepicker - Stack Ove...

jquery mobile jquery-mobile jquery-ui-datepicker
Rectangle 27 0

You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).

There are a couple of ways I know of to get around this:

prompt()
  • If you trigger the .focus() from within a .click() event (e.g. from opening your dialog), the keyboard shows up

Ah, makes sense. In theory it make sense from their point of view that the keyboard should only be up when the user brings focus to an element for usability reasons. However in the case where an input is the only thing on the screen and for usability reasons I want to automatically bring focus to that element the keyboard won't pop up. At any rate, thanks for your help.

One huge caveat is that is has to be a click event. Even though tap and click are basically the same, it has to be a click event or it won't open

But why oh why does trigging .focus() from within a keyboard event not work?

Can you elaborate on the prompt() method? Can it be used as workaround when you can't trigger focus from within a click event?

@PetrPeller -- He was reffering to window.prompt() which displays a popup dialog box that prompts the visitor for input. It displays the keyboard but also the popup dialog, so you can't simpy use it for form inputs. link

jquery - Show virtual keyboard on mobile phones in javascript - Stack ...

javascript jquery jquery-mobile
Rectangle 27 0

While the Samuel's response should fix the problem, it will create other side effects. For example in Phonegap 3.3 adding height=device-height to viewport, you would get scroll in every screens (even when the elements on the page are not big enough to full the screen). In our case the only solution ,found here, was add a notification handler to the open keyboard on Phonegap which calls to a javascript function, and then hide the fixed footer on this function, besides hide/show the footer again in focus/blur functions. An example using jquery mobile is attached, but you could update it to use a different framework:

$(document).on('focus','input, select, textarea',function() {
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7){
        if($(this).attr('readonly')===undefined){
            $("[data-role=footer]").hide();
        }
    }  
  });

  $(document).on('blur','input, select, textarea',function(){
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7){
        if($(this).attr('readonly')===undefined){
            $("[data-role=footer]").show();
        }
    }
    setTimeout(function() {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
  });

  function hideFooter(){
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7){
        if($(this).attr('readonly')===undefined) {
            $("[data-role=footer]").hide();
        }
    }
  }

And in phonegap MainViewController.m:

- (id)init
{
    self = [super init];
    if (self) {
        // Uncomment to override the CDVCommandDelegateImpl used
        // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
        // Uncomment to override the CDVCommandQueue used
        // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
        }

    //fix for ios7 footer is scrolled up when the keyboard popsup.
    [[NSNotificationCenter defaultCenter] addObserver:self
        selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];

    return self;
}

-(void)keyboardWillShow:(NSNotification*)notification{
    if (IsAtLeastiOSVersion(@"7.0")){
        [self.webView stringByEvaluatingJavaScriptFromString:@"hideFooter()"];
    }
}

I'm using PhoneGap Build to make all my executables (I'm on Windows). Is this file only available in iOS platforms, or where can I find it? If so, is there any way to implement this fix for PG Build development?

This file is included in Phonegap for iOS (./platforms/ios/APPNAME/Classes/MainViewController.m), from Windows you wont be able to compile for iOS (maybe using the phonegap cloud compile system, but I dont know about it).

cordova - Bug with iOS7 showing the soft keyboard with phonegap and In...

cordova keyboard ios7
Rectangle 27 0

None of the previous solutions worked for me. However, I noticed that $('textarea').focus().select(); worked after I access the page a second time. So, I force the jquery mobile to data-prefetch my comment box page.

$('#comment-box-page').live('pageshow', function () {
   $('textarea').focus().select();
});

On the list page there is a fake image of a small text box, that redirects to comment-box.html, which is just a big test area with post and cancel buttons.

<div data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
        <div data-role="fieldcontain">
            <a href="comment-box.html" data-prefetch><img src="fake-textfield.jpg"/>
            </a>
        </div>
    </div>
  • data-prefetch is what is making the difference. When you click the link, the page will behave as it was the second time you visited it, enabling focus and bringing the keyboard up.

Would there be any way you could paste a working example of this on jsfiddle, etc or at least a whole basic example on here that I can see how it works - I couldn't quite get your example working.

input focus in jquery mobile, but keyboard doesn't appear - Stack Over...

keyboard jquery-mobile cordova
Rectangle 27 0

jQuery('#myTextBox').trigger("tapone");

jquery - iPhone Mobile Safari: Force keyboard open - Stack Overflow

jquery iphone ipad mobile safari
Rectangle 27 0

Unfortunately, this is a major bug of jQuery Mobile. There are many issue is opening about this and they are set the milestone at next release (at least 1.3.1). https://github.com/jquery/jquery-mobile/issues/5532

html - jQuery Mobile Phonegap iOS: Header flickers when I pull up keyb...

html html5 jquery-mobile cordova
Rectangle 27 0

I'm afraid you can't open the keyboard without using a input. For more information you can read the following thread: Show virtual keyboard on mobile phones in javascript

javascript - Show mobile keyboard without input element - Stack Overfl...

javascript jquery html5 mobile keyboard
Rectangle 27 0

Android pulls up soft keyboard whenever text input field is in focus. "Go" or "Done" button on Android works as form submit, therefore input text looses focus and keyboard disappears. User expects the keyboard to disappear after "Go", "Done" or "Enter" is pressed - so Android follows this rule. Forcing re-focus on field's blur will not do much since technically you moved to a different window.

$('body').click(function() { $('#typer').focus(); }

can provide a partial solution, whereby user has to click once anywhere in the body of the page for the typer to re-gain focus. It causes OS to move back to browser Activity and focus the input field. This fiddle shows it as an example: http://jsfiddle.net/Exceeder/Z6SFH/ (use http://jsfiddle.net/Exceeder/Z6SFH/embedded/result/ on your Android device)

Other than writing a PhoneGap-like wrapper to control imeOptions of the keyboard, I am not aware of any solution that can solve this problem.

thanks alex, i already do the workaround with the click on document. its sad that there is no good api for that. $(document).click(function () { $('#typer').focus(); })

Guys, lets post new issues on the Chromium bug tracker for this. It's the only way to make it happen. I posted mine here: code.google.com/p/chromium/issues/ Just pretend you didn't see my issue and post a duplicate so they see the need for this more.

jquery - force keyboard open on android - Stack Overflow

android jquery mobile keyboard
Rectangle 27 0

The keyboard is opened when we have the focus on an input so:

// hide the footer when input is active
$("input").blur(function() {
    $("[data-role=footer]").show();
});

$("input").focus(function() {
    $("[data-role=footer]").hide();
});

android - jQuery Mobile fixed footer is moving when the keyboard appea...

android ios cordova jquery-mobile
Rectangle 27 0

What happens on Android when the keyboard is opened, is that the viewport of the webpage gets resized. The actually viewport is changed and the website/webapp does not know it is because of the keyboard. This resize can trigger alternative CSS code for smaller views (think about responsive layout here). At least, that was my issue with jQuery Mobile.

css3 - Android Hybrid App Keyboard/Dropdown popup resize issue for off...

android css3 cordova
Rectangle 27 0

You have to use the "click" event to open the keyboard:

$(document).live('click', function() {
    $("#input-element-id").focus();
});

input focus in jquery mobile, but keyboard doesn't appear - Stack Over...

keyboard jquery-mobile cordova
Rectangle 27 0

you need a keypress event my friend. The "Go" button on your phone is equivalent to the Enter key of your physical keyboard. You have to check for that keyCode. Here's a code :

$("#my-controlgroup").on("keypress", "input[type=text]", function(e) {
    //check for enter key 
    if(e.which === 13) {
        //check for empty input
        if($("input:empty").length === 0) {
           alert("submitted!");
        }
    }
});

javascript - jQuery Mobile 'Form' is not getting submitted from the iP...

javascript jquery iphone cordova jquery-mobile
Rectangle 27 0

Switched the event to blur() and it seems to work a lot better with the iPad, Playbook still does some strange things. I don't think the event firing is quite there for the Playbook yet.

jquery - What is the Mobile Safari event for the on-screen keyboard cl...

jquery ipad mobile-safari
Rectangle 27 0

As specified in the jQuery Mobile documentation. To quote the site:

In jQuery Mobile, you can use existing and new HTML5 input types such as password, email, tel, number, and more. Some type values are rendered differently across browsers. For example, Chrome renders the range input as a slider. jQuery Mobile standardizes the appearance of range and search by dynamically changing their type to text. You can configure which input types are degraded to text with the page plugin's options.

One major advantage of using these more specific input types if that on mobile devices, specialized keyboards that speed data entry are offered in place of the standard text keyboard. Try the following inputs on a mobile device to see which display custom keyboards on various platforms.

While not explicitly stated within the documentation, checking the source of the examples shows that input types can be defined by using the type="" attribute. Give this a whirl:

<input type="tel" name="tel" id="tel" value="" />

jquery - Disable parsing on number keyboard in iPhone - Stack Overflow

jquery iphone html5 jquery-mobile keyboard
Rectangle 27 0

Instructions in words: when opening the select2 make the input read only. When the input is focused, remove readonly.

$(".location-select").on("select2:open", () ->
  $(".select2-search__field").attr("readonly", true)

  $(".select2-dropdown").bind("touchstart", (e) ->
    $target = $(e.target)
    if $target.hasClass("select2-search__field")
      $target.removeAttr("readonly").focus()
  )
)

$(".location-select").on("select2:close", () ->
  $(".select2-dropdown").unbind("touchstart")
  $(".select2-search__field").removeAttr("readonly")
)

jquery - select2 keyboard issue on mobile - Stack Overflow

jquery jquery-select2
Rectangle 27 0

submit
form
var submitHandler = function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
};

ios - How to disable the Go button on a native keyboard when developin...

iphone ios html5 jquery-mobile cordova
Rectangle 27 0

Programmatically moving to the next input field in a mobile browser without dismissing the keyboard appears to be impossible. (This is terrible design, but it's what we have to work with.) However, a clever hack is to swap the input element positions, values, and attributes with Javascript so that it looks like you are moving to the next field when in fact you are still focused on the same element. Here is code for a jQuery plug-in that swaps the id, name, and value. You can adapt it to swap other attributes as necessary. Also be sure to fix up any registered event handlers.

$.fn.fakeFocusNextInput = function() {
    var sel = this;
    var nextel = sel.next();
    var nextval = nextel.val();
    var nextid = nextel.attr('id');
    var nextname = nextel.attr('name');
    nextel.val(sel.val());
    nextel.attr('id', sel.attr('id'));
    nextel.attr('name', sel.attr('name'));
    sel.val(nextval);
    sel.attr('id', nextid);
    sel.attr('name', nextname);
    // Need to remove nextel and not sel to retain focus on sel
    nextel.remove();
    sel.before(nextel);
    // Could also return 'this' depending on how you you want the
    // plug-in to work
    return nextel;
};

Clever. If you use nextel.detach(); instead of nextel.remove();, the fields will be reusable too. (remove() also removes the bound listeners)

This doesn't work if there are elements in-between the inputs. See jsfiddle.net/EbU6a/743

@RubenSandwich yes, this sample code makes a number of assumptions, but it can be adapted to elements in any position by updating .next() and .before() to remove the next form element and re-insert it wherever it needs to go.

javascript - Programmatically focus on next input field in mobile safa...

javascript jquery ios focus mobile-safari
Rectangle 27 0

Here's the Fiddle, if it helps !

<form id="loginForm" data-ajax="false">

   <div class="ui-body">

     <div data-role="controlgroup" id="my-controlgroup">

       <input data-theme="b" type="text" name="text-username" id="text-username"  placeholder="Username" value="" />

       <input data-theme="b" type="password" name="text-pwd" id="text-pwd"  placeholder="Password" value="" />

       <button type="submit" data-theme="none" name="submit" value="">GO</button>

     </div>

    </div>

</form>

Thanks for your reply but you have misunderstood the question! I don't need any button in the form since i am using jquery mobile in phonegap so when textbox gets the focus a soft keybord of the mobile opens and there it have a "Go" button.which on tap will submit the Form.

javascript - jQuery Mobile 'Form' is not getting submitted from the iP...

javascript jquery iphone cordova jquery-mobile