javascript - Disable the native keyboard on Ionic - Stack Overflow

admin管理员组

文章数量:1297085

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.

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.

• javascript
• ionic-framework

Share Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked Sep 14, 2015 at 20:27 VidulVidul 10.6k22 gold badges1919 silver badges2020 bronze badges 5

• 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 Commented Sep 14, 2015 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 Commented Sep 16, 2015 at 16:45
• try just adding disabled attribute to those input elements. – Mudasser Ajaz Commented Sep 16, 2015 at 16:47
• @mudasserajaz Great, this works! Please post the ment as an answer. – Vidul Commented Sep 16, 2015 at 16:55
• I have added my answer :) – Mudasser Ajaz Commented Sep 16, 2015 at 16:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

Updated January 22, 2022:

While reading the Virtual Keyboard API document here: https://github./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/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!

I know that I'm late, but I've developed this library to do exactly that: https://www.npmjs./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.

本文标签： javascriptDisable the native keyboard on IonicStack Overflow