CODEWITHSUNDEEP
javascriptionic-framework
Vidul
Vidul

Reputation: 10528

Disable the native keyboard on Ionic

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.

Upvotes: 4

Views: 7457

Answers (3)

Fearnbuster
Fearnbuster

Reputation: 896

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 enter image description here

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

enter image description here enter image description here

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

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

enter image description here enter image description here

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!

Upvotes: 2

Cosmin Popescu
Cosmin Popescu

Reputation: 300

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.

Upvotes: 1

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

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.

Upvotes: 4

Related Questions