Input disableTouchKeyboard

[Glideh]

In input mode, shouldn't we have a disableTouchKeyboard option to prevent mobile keyboard to pop out when the input is focused ?
Setting it readonly seems not a good idea for me as it suggests we can't change the value.

[CalamityJames]

This would definitely be useful, as the touch keyboard on most devices obscures half the page, which when you're working with a datepicker anyway means that the form becomes rather unwieldy.

Screenshot: https://f.cloud.github.com/assets/5637797/2217996/cafd628a-9a25-11e3-8887-5e12fb459335.png

[eternicode]

I'm not sure this is possible, outside of setting readonly on the input. If you have any reading on doing this from a webpage, feel free to link it, but some searching on my part turned up a lot of "nope, can't do that". I seem to recall that some mobile browsers had proprietary css for disabling the keyboard, but I can't find anything about that now.

readonly just means the user can't change the value -- the page (via js) can always change the value (even for disabled inputs!). I agree it's not a great solution, but it looks like the only solution we have right now.

[Glideh]

I use it with jonthornton/jquery-timepicker (look at the related option).
I didn't check the implementation though.

[Glideh]

Also (I didn't see this option) maybe we should have an HTML5 date input fallback for browsers supporting it, but that's another issue

[CalamityJames]

Thanks for the example @Glideh, I've managed to include that in the scripts (adds the option disableTouchKeyboard with a default of false) and it seems to be working!

https://f.cloud.github.com/assets/5637797/2308633/86b99b94-a2c1-11e3-9739-2e3a7c8b8719.png

[Glideh]

Good catch, thanks for the PR.

(window.navigator.msMaxTouchPoints || 'ontouchstart' in document)

Seems indeed to be the key

[MrSleeps]

I'm still having an issue with this, it still pops up the keyboard on both the Samsung s4 mini and Sony Xperia Z3 (android 4.4.2 and 4.4.4 respectively). Pulling my hair out on this one..

[CalamityJames]

Confirmed re-occurring on my Galaxy S6 Edge too running Android 5.0.2 on Chrome and stock browser.

I don't have an iPhone to test on though I'm afraid.

Sorry chaps. Will try and find some time to dig back through the code and see what's different in newer rendering engines (maybe the msMaxTouchPoints or ontouchstart variables are not passed any more).

[razvanphp]

Can you try this? I don't have access to Android devices, but this code snippet is from a rather great library, interact.js, so it should be actual.

var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);

[acrobat]

@razvanphp can you create a jsfiddle to test the piece of code? I have access to a fex android and ios devices so i'm able to test the snippet on different types of devices!

[maximelebreton]

+1

v1.5.0
HTC One with Android 5.0.2
Chrome 47.0

[maximelebreton]

i dont think that msMaxTouchPoints or ontouchstart variables are the problem, because i made this workaround based on the same variables and it works.

i've just added a little trick to improve accessibility. (but of course this is not perfect)

var isDatepickerVisible = false;

$('.datepicker').datepicker({
    disableTouchKeyboard: false

  }).on('show', function(e) {
    /**
     * hack to disable touch keyboard with blur() method,
     * but only if the datepicker is not visible (to minimize accessibility problems)
     * so with a second click, the keyboard appears
     */
    if ((window.navigator.msMaxTouchPoints || 'ontouchstart' in document)) {
      if (!isDatepickerVisible) {
        $('input', $(this))[0].blur();
      }
    }
    isDatepickerVisible = true;

  }).on('hide', function(e) {
    isDatepickerVisible = false;
  });

tested on:
HTC One / Android 5.0.2 / Chrome 47.0
iPad 3 / iOS 9.0.2 / Chrome & Safari

[acrobat]

@maximelebreton care to create a PR with a fix?