How to Hide the Android Keyboard Using JavaScript

How can I hide the Android keyboard using JavaScript?

What you need to do is create a new input field, append it to the body, focus it and the hide it using display:none. You will need to enclose these inside some setTimeouts unfortunately to make this work.

var field = document.createElement('input');
field.setAttribute('type', 'text');
document.body.appendChild(field);

setTimeout(function() {
    field.focus();
    setTimeout(function() {
        field.setAttribute('style', 'display:none;');
    }, 50);
}, 50);

javascript - hide mobile default keyboard but keep input field active

Thank you for the replies. As the consensus is that this is not possible I did a work-around that I am posting here:

The basic principle is to blur the input field and then capture the keypresses to add them to the input field anyway.

In this situation I am using a barcode scanner with all-numeric barcodes so that's what this will work with but if someone else should be interested it should be trivial to adapt to other situations:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script>
$( document ).ready( function () {
    // _input_fields and _scan_fields are jQuery objects with the relevant elements
    let _input_fields = $("input[type=number], input[type=text], input:not([type]), select");
    let _scan_fields = $("input[type=number].scanner");
    // _ignore is set to true when a scannable field actually _should_ get focus
    var _ignore = false;
    // onfocus() for relevant input fields on page
    _input_fields.focus(function(){
        // only do something if scannable fields shouldn't actually get focus
        if (!_ignore) {
            // outer is the current input field that is getting focus
            let outer = this;
            // found is set to true if the current input field is scannable
            let found = false;
            // loop through all scannable fields to see if the current input field is one of them
            _scan_fields.each(function(index) {
                // inner is one of the scannable fields, possibly the current input field
                let inner = this;
                // _field stores the current input field _if_ it is scannable
                var _field;
                // only check (and potentially reset key capture) if we have not found the current 
                // input field to be one of the scannable fields (yet)
                if (!found) {
                    // check if the current input field "outer" is the currently examined 
                    // scannable field "inner"
                    if (inner == outer) {
                        // the current input field is one of the scannable fields
                        // immediately remove focus to disable mobile keyboard
                        inner.blur();
                        // remember which input field we have found and disable further checks
                        _field = inner;
                        found = true;
                        // remove any existing keycapture (might destroy existing functionality!!!)
                        $(document).off("keypress");
                        // capture keypresses and add numbers to the input field
                        $(document).keypress(function(event){
                            var _field = inner;
                            let keynum = event.which;
                            if (keynum == 13) { // enter
                                // ignore or submit?
                            } else if ((keynum < 48) || (keynum > 57)) {
                                // not-a-number, ignore in this case
                            } else {
                                // a number, add to field value
                                $(_field).val($(_field).val() + String.fromCharCode(event.which));
                            }
                        });
                    } else {
                        // this is a regular field
                        // remove any existing keycapture (might destroy existing functionality!!!)
                        $(document).off("keypress");
                    }
                }
            });
        }
    });
    // add a button after each scannable input field
    $("input[type=number].scanner").after(function(){
        return "<button class='descanner'>123</button>";
    });
    // if those buttons are pressed, the input field before them actually gets focus
    // overriding the new behaviour
    $("button.descanner").click(function(event){
        // these buttons do not submit the form
        event.preventDefault();
        // remove any existing keycapture (might destroy existing functionality!!!)
        $(document).off("keypress");
        // set focus for the input field but make sure we don't catch this above
        // also, clear content of input field
        _ignore = true;
        $(this).prev("input[type=number].scanner").val("").focus();
        _ignore = false;
    });
});
</script>
</head>
<body>
<form>
    <input type="number" name="field1" class="" />
    <input type="text" name="field2" class="" />
    <input name="field3" class="" />
    <select name="field4" class="">
        <option value="bac">abc</option>
    </select>
    <input type="number" name="field5" class="scanner" />
    <input type="number" name="field6" class="" />
    <input type="number" name="field7" class="scanner" />
</form>

</body>
</html>

The form has 7 fields and 2 of those have the desired functionality. To enable manual edit of those fields a button is added next to each of those 2 fields.

This has been tested in Chrome 55 and on a Zebra TC 51 with Webview updated to Chromium 55.

Hide soft keyboard android application start up in phonegap

You need to install the keyboard plugin.

cordova plugin add cordova-plugin-keyboard

Now on device ready event hide the keyboard.

Keyboard.hide();

Edit 1 :-

try adding this line in androidmanifest.xml

android:windowSoftInputMode="stateHidden|adjustPan"

Hope this might help.

Hide virtual keyboard on mobile with Jquery/Javascript (Mobiscroll)

Blur was the key for my issue ! Mobiscroll has a method called onBeforeShow that gets called before the mobiscroll appears. In this method I used blur() on the input type i used the mobiscroll on ! My code below:

var options = {
        preset: this.preset,
        theme: 'wp light',
        mode: 'scroller',
        display: 'bottom',
        timeWheels: "HHii",
        dateFormat: "dd-mm-yy",
        timeFormat: "HH:ii",
        lang: 'nl', // TODO: Deduce from application language.
        onBeforeShow: (html, inst) => { this.findControl().blur();}
    };
    this.findControl().mobiscroll(options);

How to Hide the Android Keyboard Using JavaScript

How can I hide the Android keyboard using JavaScript?

javascript - hide mobile default keyboard but keep input field active

Hide soft keyboard android application start up in phonegap

Hide virtual keyboard on mobile with Jquery/Javascript (Mobiscroll)

Related Topics

Leave a reply