Disable the native keyboard on Ionic

Question

Clearly solutions like this do not work as expected on Android 5.1.* (the KB flickers (quickly opens & closes)).

.directive('disableKeyboard', function ($timeout, $window) {
    var linker = function (scope, element, attrs) {

        if (!$window.cordova || !$window.cordova.plugins.Keyboard) {
            return;
        }

        element.bind('focus click',
            function (e) {
                e.preventDefault();
                $timeout($window.cordova.plugins.Keyboard.close, 0);
            }
        );
    };

    return {
        restrict: 'A',
        link: linker,
    }
})

The Ionic forum has not given meaningful solutions. Any suggestions? Please note: I would like to avoid cordova.plugins.Keyboard.close. Thank you.

what is exact behavior you want? like what is the input field? how do you want to add data into that field etc? may be sharing template side will help us to give you workaround. — Mudasser Ajaz, Sep 14 '15 at 21:26
@mudasserajaz The expected behaviour - to disable the native keyboard on some pages (i.e. to stay closed on _focus / click_ events). — Vidul, Sep 16 '15 at 16:45
try just adding `disabled` attribute to those input elements. — Mudasser Ajaz, Sep 16 '15 at 16:47
@mudasserajaz Great, this works! Please post the comment as an answer. — Vidul, Sep 16 '15 at 16:55

score 4 · Accepted Answer · answered Sep 16 '15 at 16:59

4

Add disabled attribute to your input tag, for example

<input type="text" name="lname" disabled>

NOTE: This might change background color of input tag, but you can change that using css.

answered Sep 16 '15 at 16:59

Mudasser Ajaz

6,197
1
26
29

This is the solution. – Vidul Sep 16 '15 at 17:01

score 1 · Answer 2 · answered May 26 '20 at 19:25

I know that I'm late, but I've developed this library to do exactly that: https://www.npmjs.com/package/ionic-no-keyboard. It has no flicker and it does exactly that. It disabled the native keyboard. Just add the no-keyboard tag on the input and the native keyboard will be disabled.

Fearnbuster · Answer 3 · 2022-01-22T21:47:22.287

Updated January 22, 2022:

While reading the Virtual Keyboard API document here: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardPolicy/explainer.md I noticed that it referred to an inputmode attribute that could be used to change what type of Virtual Keyboard layout should be shown (numeric, telephone, numeric, etc).

Within this document, they mentioned that a value of none could be used to hide the Virtual Keyboard, and after looking up the attribute in the MDN documents, sure enough, the none value is meant to be used when the page (in this case the Mobile App) implements its own keyboard: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode#values

Unlike the other solutions, this attribute will retain the focus on the input element and will still permit the user to perform multi-selections and context menu actions (i.e. copy/paste, select all, etc).

This attribute can be used on inputs:

<input inputmode="none">

As well as on any element that is made editable through the contenteditable attribute:

<div inputmode="none" contenteditable />

I tested this functionality both on the iOS (XCode) and Android (Android Studio) simulators/emulators and it worked on both!

Original Answer January 15: 2022:

Thankfully it looks like a new Web API is in the works called the Virtual Keyboard API.

I won't elaborate much on the new API itself, because I already did so in another Stack Overflow answer.

The new API introduced a new attribute called virtualKeyboardPolicy which can be set to auto or manual.

When set to manual the Virtual Keyboard will not show up automatically when an input element is focused, but unlike the other solutions, the input will remain focused and permit the user to perform multi-character selections, copy/paste, etc.

The feature was shipped in Chromium v94 (which was released on September 21, 2021), so I did some testing in a couple of Chromium based browsers, and it seems that the new attribute already works!

<input
  virtualkeyboardpolicy="auto"
  value="Auto Virtual Keyboard"
>

Notice that the Virtual Keyboard is hidden in the following images!

<input
  virtualkeyboardpolicy="manual"
  value="Manual Virtual Keyboard"
>

My hope is that the Virtual Keyboard API will eventually be implemented in the Web Views that Ionic uses to run on Native devices which will enable us to use it in our Mobile Apps!

Disable the native keyboard on Ionic

3 Answers3