How can I hide the Android keyboard using JavaScript?

I would like to hide the Android virtual keyboard in JavaScript. Someone suggested doing this:

$('#input').focus(function() {
  this.blur();
});

But this doesn't work if the keyboard is already visible. Is this something that can be done?

I found a simpler solution that requires neither adding element nor a special class. found it there: http://www.sencha.com/forum/archive/index.php/t-141560.html

And converted the code to jquery :

function hideKeyboard(element) {
	element.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
	element.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
	setTimeout(function() {
		element.blur();  //actually close the keyboard
    	// Remove readonly attribute after keyboard is hidden.
		element.removeAttr('readonly');
		element.removeAttr('disabled');
	}, 100);
}

You call the function by passing it the input from which the keyboard was opened, or just passing $('input') should also work.

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);

You can now use inputmode=“none” on up to date browsers. See:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Here is a bullet-proof method that works for Android 2.3.x and 4.x

You can test this code using this link: http://jsbin.com/pebomuda/14

function hideKeyboard() {
  //this set timeout needed for case when hideKeyborad
  //is called inside of 'onfocus' event handler
  setTimeout(function() {
    
    //creating temp field
    var field = document.createElement('input');
    field.setAttribute('type', 'text');
    //hiding temp field from peoples eyes
    //-webkit-user-modify is nessesary for Android 4.x
    field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
    document.body.appendChild(field);
  
    //adding onfocus event handler for out temp field
    field.onfocus = function(){
      //this timeout of 200ms is nessasary for Android 2.3.x
      setTimeout(function() {
        
        field.setAttribute('style', 'display:none;');
        setTimeout(function() {
          document.body.removeChild(field);
          document.body.focus();
        }, 14);
        
      }, 200);
    };
    //focusing it
    field.focus();
    
  }, 50);
}

For anyone using vuejs or jquery with cordova, use document.activeElement.blur() ;

hideKeyboard() {
    document.activeElement.blur();
}

..and from my text box, I just call that function:

For VueJS : v-on:keyup.enter="hideKeyboard" Pressing the enter button closes the android keyboard.

for jQuery:

$('element').keypress(function(e) {
  if(e.keyCode===13) document.activeElement.blur();
}

Just blur the active focused input field:

$(document.activeElement).filter(':input:focus').blur();

I made a jquery plugin out of the answer of QuickFix

(function ($) {
  $.fn.hideKeyboard = function() {
    var inputs = this.filter("input").attr('readonly', 'readonly'); // Force keyboard to hide on input field.
    var textareas = this.filter("textarea").attr('disabled', 'true'); // Force keyboard to hide on textarea field.
    setTimeout(function() {
      inputs.blur().removeAttr('readonly');  //actually close the keyboard and remove attributes
      textareas.blur().removeAttr('disabled');
    }, 100);
    return this;
  };
}( jQuery ));

Usage examples:

$('#myInput').hideKeyboard(); 
$('#myForm input,#myForm textarea').hideKeyboard(); 

If you do not find a simple solution to do this, you could always just call java code from javascript. Tutorial and example here. Hide soft keyboard here.

...
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
....

public class JavaScriptInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    JavaScriptInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    public void hideKeyboard() {
        InputMethodManager imm = (InputMethodManager)mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
        ...
    }
}

javascript

<script type="text/javascript">
function hideAndroidKeyboard() {
    Android.hideKeyboard();
}
</script>

Things to watch out for :

Javascript to Native Java will not work on Simulator versions 2.3+. http://code.google.com/p/android/issues/detail?id=12987.

I am not certain, but you might not be on the main thread when hideKeyboard is called.

This is of course if you cannot find a simple solution.

I've fixed like this, with this "$(input).prop('readonly',true);" in beforeShow

Ex:

$('input.datepicker').datepicker(
                        {   
                            changeMonth: false,
                            changeYear: false,
                            beforeShow: function(input, instance) { 
                                $(input).datepicker('setDate', new Date());
                                $(input).prop('readonly',true);
                            }
                        }                         
                     ); 

View view = this.getCurrentFocus();
if (view != null) {  
    InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
    imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
}

VueJS One Liner:

<input type="text" ref="searchBox" @keyup.enter="$refs.searchBox.blur()" />

Or you can hide it in JS with this.$refs.searchBox.blur();

rdougan's post did not work for me but it was a good starting point for my solution.

function androidSoftKeyHideFix(selectorName){
    $(selectorName).on('focus', function (event) {
        $(selectorName).off('focus')
        $('body').on('touchend', function (event) {
            $('body').off('touchend')
            $('.blurBox').focus();
            setTimeout(function() {
                $('.blurBox').blur();
                $('.blurBox').focus();
                $('.blurBox').blur();
                androidSoftKeyHideFix(selectorName); 
            },1)
        });
    });
}    

You need an input element at the top of the body, I classed as 'blurBox'. It must not be display:none. So give it opacity:0, and position:absolute. I tried placing it at the bottom of the body and it didn't work.

I found it necessary to repeat the .focus() .blur() sequence on the blurBox. I tried it without and it doesn't work.

This works on my 2.3 Android. I imagine that custom keyboard apps could still have issues.

I encountered a number of issues before arriving at this. There was a bizarre issue with subsequent focuses retriggering a blur/focus, which seemed like an android bug. I used a touchend listener instead of a blur listener to get around the function refiring closing the keyboard immediately after a non-initial opening. I also had an issue with keyboard typing making the scroll jump around...which is realted to a 3d transform used on a parent. That emerged from an attempt to workaround the blur-refiring issue, where I didn't unblur the blurBox at the end. So this is a delicate solution.

Giving soft keyboard some time to close works for me.

$('#ButtonCancel').click(function () {
    document.body.focus();

    setTimeout(function () {
        //close the dialog, switch to another screen, etc.
    }, 300);
});

Just disable the form field:

document.getElementById('input').disabled

Simple jQuery plugin to prevent keyboard showing for inputs:

(function ($) {
    $.fn.preventKeyboard = function () {
        return this
			.filter('input')
			.on('focus', function () {
                $(this)
					.attr('readonly', 'readonly')
					.blur()
					.removeAttr('readonly');
            });
    };
}(jQuery));

Usage

It's useful for date fields with some datepicker attached.

$('#my_datepicker_field').preventKeyboard();

Try the snippet below on your smartphone!

(or see it on https://jsfiddle.net/dtyzLjhw/)

(function($) {
  // Create plugin that prevents showing the keyboard
  $.fn.preventKeyboard = function() {
    return this
      .filter('input')
      .on('focus', function() {
        $(this)
          .attr('readonly', 'readonly')
          .blur()
          .removeAttr('readonly');
      });
  };

  $(document).ready(function($) {
    // Date field has datepicker attached.
    $('input[name=date]').datepicker();

    // Prevent showing keyboard for the date field.
    $('input[name=date]').preventKeyboard();
  });
}(jQuery));

/*!
 * Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 */

.datepicker {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr;
}

.datepicker-inline {
  width: 220px;
}

.datepicker-rtl {
  direction: rtl;
}

.datepicker-rtl.dropdown-menu {
  left: auto;
}

.datepicker-rtl table tr td span {
  float: right;
}

.datepicker-dropdown {
  top: 0;
  left: 0;
}

.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #999;
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-top: 0;
  position: absolute;
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
  top: -7px;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
  top: -6px;
}

.datepicker-dropdown.datepicker-orient-top:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999;
}

.datepicker-dropdown.datepicker-orient-top:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}

.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker td,
.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: #eee;
  cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #999;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999;
  cursor: default;
}

.datepicker table tr td.highlighted {
  background: #d9edf7;
  border-radius: 0;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background-color: #fde19a;
  background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
  background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
  border-color: #fdf59a #fdf59a #fbed50;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #000;
}

.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
  background-color: #fdf59a;
}

.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
  background-color: #fbf069 \9;
}

.datepicker table tr td.today:hover:hover {
  color: #000;
}

.datepicker table tr td.today.active:hover {
  color: #fff;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
  background: #eee;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
  background-color: #f3d17a;
  background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
  background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
  border-color: #f3e97a #f3e97a #edde34;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
  background-color: #f3e97a;
}

.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
  background-color: #efe24b \9;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
  background-color: #9e9e9e;
  background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
  background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
  background-image: linear-gradient(to bottom, #b3b3b3, #808080);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
  border-color: #808080 #808080 #595959;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
  background-color: #808080;
}

.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
  background-color: #666666 \9;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
  background-image: linear-gradient(to bottom, #08c, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
  background-color: #0044cc;
}

.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
  background-color: #003399 \9;
}

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
  background: #eee;
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: #999;
  cursor: default;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
  background-image: linear-gradient(to bottom, #08c, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
  background-color: #0044cc;
}

.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  background-color: #003399 \9;
}

.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: #999;
}

.datepicker .datepicker-switch {
  width: 145px;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
  cursor: pointer;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
  background: #eee;
}

.datepicker .prev.disabled,
.datepicker .next.disabled {
  visibility: hidden;
}

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}

.input-append.date .add-on,
.input-prepend.date .add-on {
  cursor: pointer;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
  margin-top: 3px;
}

.input-daterange input {
  text-align: center;
}

.input-daterange input:first-child {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.input-daterange input:last-child {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 20px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  vertical-align: middle;
  background-color: #eee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px;
}

.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  color: #333333;
  font-size: 13px;
  line-height: 20px;
}

.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
  padding: 4px 5px;
}


/*# sourceMappingURL=bootstrap-datepicker.standalone.css.map */

<!-- Require libs to show example -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<!-- Simple form with two text fields -->
<form>
  <input name="foo" type=text value="Click to see keyboard" />
  <br/><br/><br/>
  <input name="date" type=text />
</form>

Unfortunately this may not be the most immediate solution, but it seems that a new tool called the Virtual Keyboard API is in the works that is intended to give developers much more flexibility when it comes to the Native Keyboard on Mobile devices.

The W3C working draft for this new feature looks like it was published just this past September, so be aware that Browser Support for this feature will be minimal for now.

With this new API, the Virtual Keyboard can be shown and hidden with the following code:

navigator.virtualKeyboard.show();
navigator.virtualKeyboard.hide();

There are some special conditions that must be met when using these methods. Most notably, the element's virtualKeyboardPolicy (which is a new property that is also introduced in the Virtual Keyboard API) must be set to manual.

This means that the keyboard will not automatically open when the given element is focused. You must handle the showing/hiding of the virtual keyboard entirely yourself.

To check if the current browser supports the Virtual Keyboard API, use the following code:

if ('virtualKeyboard' in navigator)

Indeed for me the afore mentioned expression evaluates to true on Chrome, but not (yet) in FireFox.

This, however, is to be expected, because according to the Chrome Platform Status the feature was shipped in Chrome v94 which was just released on September 21, 2021, so it will take a little while before the other Browsers implement it (that is if they ever do):

I'm coming into this a little late, but I wanted to share a solution that is working for me on Android 2.5.x+ and iOS 7.

My big deal was closing the keyboard on orientation change. This results in a recoverable (meaning mostly elegant) state after any browser orientation change.

This is coffeeScript:

@windowRepair: (mobileOS) ->
  activeElement = document.activeElement.tagName
  if activeElement == "TEXTAREA" or activeElement == "INPUT"
    $(document.activeElement).blur()
    #alert "Active Element " + activeElement + " detected"
  else
    $('body').focus()
    #alert "Fallback Focus Initiated"
  if mobileOS == "iOS"
    window.scrollTo(0,0)
  $('body').css("width", window.innerWidth)
  $('body').css("height", window.innerHeight)

I hope this helps somebody. I know I spent a ton of time figuring it out.

HTML

<input type="text" id="txtFocus" style="display:none;">

SCRIPT

$('#txtFocus').show().focus().hide();
$.msg({ content : 'Alert using jquery msg' });

I managed to get it to work with the following

document.body.addEventListener( 'touchend', function(){
    if( document.getElementById('yourInputFiled') )
        document.getElementById('yourInputFiled').blur();    
});

and preventDefault() and stopPropagation() in the listener for your input field

There is no way you can hidde the keyboard properly with js because its a OS problem, so one thing you can easy do to "hidde" the keyboard, is instead of using an input Element you can make any "non-input html element" a key listener element just by adding the [tabindex] attribute, and then you can easily listen the keydown and keyup events and store the "$event.target.value" in a variable to get the input.

Here's what I do (from https://github.com/danielnixon/oaf-side-effects):

/**
 * Hide the on-screen keyboard on touch devices like iOS and Android.
 *
 * It's useful to do this after a form submission that doesn't navigate away from the
 * current page but does update some part of the current page (e.g. dynamically updated
 * search results). If you weren't to do this the user might not be shown any feedback
 * in response to their action (form submission), because it is obscured by the keyboard.
 *
 * To hide the keyboard we temporarily set the active input or textarea to readonly and
 * disabled. To avoid a flash of readonly/disabled styles (often a gray background) you
 * can hook into the [data-oaf-keyboard-hack] html attribute. For example:
 *
 * ```
 *  // Readonly/disabled styles shouldn't be applied when this attribute is present.
 *  [data-oaf-keyboard-hack] {
 *    background-color: $input-bg !important;
 *  }
 * ```
 *
 * Note that lots of people simply `blur()` the focused input to achieve this result
 * but doing that is hostile to keyboard users and users of other AT.
 *
 * Do you need to use this?
 *
 * 1. If your form submission triggers a full page reload, you don't need this.
 * 2. If your form submission explicitly moves focus to some other element, you
 * don't need this. For example you might move focus to some new content that
 * was loaded as a result of the form submission or to a loading message.
 * 3. If your form submission leaves focus where it is, you probably want this.
 */
export const hideOnscreenKeyboard = (): Promise<void> => {
  // TODO: use inputmode="none"?

  // eslint-disable-next-line no-restricted-globals
  const activeElement = document.activeElement;
  const inputType =
    activeElement instanceof HTMLInputElement
      ? activeElement.getAttribute("type")
      : undefined;

  if (
    activeElement !== null &&
    activeElement instanceof HTMLElement &&
    // Don't bother with input types that we know don't trigger an OSK.
    inputType !== "checkbox" &&
    inputType !== "radio" &&
    inputType !== "submit" &&
    inputType !== "reset" &&
    inputType !== "button"
  ) {
    // Blur the active element to dismiss the on-screen keyboard.
    activeElement.blur();

    // Set an attribute that allows users to override readonly/disabled styles via CSS.
    // This input will be readonly/disabled for only a fraction of a second and we
    // want to avoid the flash of readonly/disabled styles.
    activeElement.setAttribute("data-oaf-keyboard-hack", "true");

    // Some older Android browsers need extra encouragement.
    // See https://stackoverflow.com/a/11160055/2476884
    const originalReadonly = activeElement.getAttribute("readonly");
    const originalDisabled = activeElement.getAttribute("disabled");

    // eslint-disable-next-line functional/immutable-data
    activeElement.setAttribute("readonly", "true");
    if (activeElement instanceof HTMLTextAreaElement) {
      // eslint-disable-next-line functional/immutable-data
      activeElement.setAttribute("disabled", "true");
    }

    return new Promise((resolve) => {
      setTimeout(() => {
        // Put things back the way we found them.
        originalReadonly !== null
          ? activeElement.setAttribute("readonly", originalReadonly)
          : activeElement.removeAttribute("readonly");

        if (activeElement instanceof HTMLTextAreaElement) {
          originalDisabled !== null
            ? activeElement.setAttribute("disabled", originalDisabled)
            : activeElement.removeAttribute("disabled");
        }

        activeElement.removeAttribute("data-oaf-keyboard-hack");

        // Restore focus back to where it was. Lots of people forget to do this.
        // Note that programmatically calling focus() will not trigger the
        // on-screen keyboard to reemerge.
        activeElement.focus();

        resolve();
      });
    });
  } else {
    return Promise.resolve();
  }
};

Angular version:

export component FooComponent {
  @ViewChild('bsDatePicker') calendarInput: ElementRef;

  focus(): void {
    const nativeElement = this.calendarInput.nativeElement;

    setTimeout(() => {
      nativeElement.blur();
    }, 100);
  }
}

and template:

<input
   #bsDatePicker
   bsDatepicker
   type="text"
   (focus)="focus()"/>

You can easily achieve this feature in Vue.js using @keyup feature...

<input @keyup.enter="closeMobileKeyboard($event)"/>

function closeMobileKeyboard(event) {
  event.target.blur();
}

This is what worked for me after trying all of the answers on this page:

function HideVirtualKeyboard(element_id) {
   // Set the input field to read-only and then back to normal.
   $("#" + element_id).attr("readonly", "readonly");
   setTimeout(function() { $("#" + element_id).removeAttr("readonly"); }, 1);
}

Call it with:

HideVirtualKeyboard("input");

When I tried blurring the input field, it hid the keyboard, but since I always need focus to be in the input field, the keyboard came right back as soon as I focused it again. By setting it to read-only and then back to normal, it hides the keyboard but never loses focus.

check this, its guaranteed and easy !

• add "readonly" attribute to the input field whenever you don't want the keyboard to show

 $("#inputField").attr("readonly","readonly");

• reset when clicking it

     $("#inputField").click(function () {
              $(this).removeAttr("readonly");
              $(this).focus();  
      });