SyntaxFix

[javascript] 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?

This question is related to javascript android keyboard

The answer is

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

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

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

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.

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

Just disable the form field:

document.getElementById('input').disabled

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.

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

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

Just do a random click on any non input item. Keyboard will disappear.

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.

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

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

Just blur the active focused input field:

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

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

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.

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()"/>

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

_x000D_
_x000D_ 
(function($) {_x000D_
  // Create plugin that prevents showing the keyboard_x000D_
  $.fn.preventKeyboard = function() {_x000D_
    return this_x000D_
      .filter('input')_x000D_
      .on('focus', function() {_x000D_
        $(this)_x000D_
          .attr('readonly', 'readonly')_x000D_
          .blur()_x000D_
          .removeAttr('readonly');_x000D_
      });_x000D_
  };_x000D_
_x000D_
  $(document).ready(function($) {_x000D_
    // Date field has datepicker attached._x000D_
    $('input[name=date]').datepicker();_x000D_
_x000D_
    // Prevent showing keyboard for the date field._x000D_
    $('input[name=date]').preventKeyboard();_x000D_
  });_x000D_
}(jQuery));
_x000D_ 
/*!_x000D_
 * Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)_x000D_
 *_x000D_
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)_x000D_
 */_x000D_
_x000D_
.datepicker {_x000D_
  padding: 4px;_x000D_
  -webkit-border-radius: 4px;_x000D_
  -moz-border-radius: 4px;_x000D_
  border-radius: 4px;_x000D_
  direction: ltr;_x000D_
}_x000D_
_x000D_
.datepicker-inline {_x000D_
  width: 220px;_x000D_
}_x000D_
_x000D_
.datepicker-rtl {_x000D_
  direction: rtl;_x000D_
}_x000D_
_x000D_
.datepicker-rtl.dropdown-menu {_x000D_
  left: auto;_x000D_
}_x000D_
_x000D_
.datepicker-rtl table tr td span {_x000D_
  float: right;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown {_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown:before {_x000D_
  content: '';_x000D_
  display: inline-block;_x000D_
  border-left: 7px solid transparent;_x000D_
  border-right: 7px solid transparent;_x000D_
  border-bottom: 7px solid #999;_x000D_
  border-top: 0;_x000D_
  border-bottom-color: rgba(0, 0, 0, 0.2);_x000D_
  position: absolute;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown:after {_x000D_
  content: '';_x000D_
  display: inline-block;_x000D_
  border-left: 6px solid transparent;_x000D_
  border-right: 6px solid transparent;_x000D_
  border-bottom: 6px solid #fff;_x000D_
  border-top: 0;_x000D_
  position: absolute;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-left:before {_x000D_
  left: 6px;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-left:after {_x000D_
  left: 7px;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-right:before {_x000D_
  right: 6px;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-right:after {_x000D_
  right: 7px;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-bottom:before {_x000D_
  top: -7px;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-bottom:after {_x000D_
  top: -6px;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-top:before {_x000D_
  bottom: -7px;_x000D_
  border-bottom: 0;_x000D_
  border-top: 7px solid #999;_x000D_
}_x000D_
_x000D_
.datepicker-dropdown.datepicker-orient-top:after {_x000D_
  bottom: -6px;_x000D_
  border-bottom: 0;_x000D_
  border-top: 6px solid #fff;_x000D_
}_x000D_
_x000D_
.datepicker table {_x000D_
  margin: 0;_x000D_
  -webkit-touch-callout: none;_x000D_
  -webkit-user-select: none;_x000D_
  -khtml-user-select: none;_x000D_
  -moz-user-select: none;_x000D_
  -ms-user-select: none;_x000D_
  user-select: none;_x000D_
}_x000D_
_x000D_
.datepicker td,_x000D_
.datepicker th {_x000D_
  text-align: center;_x000D_
  width: 20px;_x000D_
  height: 20px;_x000D_
  -webkit-border-radius: 4px;_x000D_
  -moz-border-radius: 4px;_x000D_
  border-radius: 4px;_x000D_
  border: none;_x000D_
}_x000D_
_x000D_
.table-striped .datepicker table tr td,_x000D_
.table-striped .datepicker table tr th {_x000D_
  background-color: transparent;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.day:hover,_x000D_
.datepicker table tr td.day.focused {_x000D_
  background: #eee;_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.old,_x000D_
.datepicker table tr td.new {_x000D_
  color: #999;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.disabled,_x000D_
.datepicker table tr td.disabled:hover {_x000D_
  background: none;_x000D_
  color: #999;_x000D_
  cursor: default;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.highlighted {_x000D_
  background: #d9edf7;_x000D_
  border-radius: 0;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.today,_x000D_
.datepicker table tr td.today:hover,_x000D_
.datepicker table tr td.today.disabled,_x000D_
.datepicker table tr td.today.disabled:hover {_x000D_
  background-color: #fde19a;_x000D_
  background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);_x000D_
  background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);_x000D_
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));_x000D_
  background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);_x000D_
  background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);_x000D_
  background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);_x000D_
  background-repeat: repeat-x;_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);_x000D_
  border-color: #fdf59a #fdf59a #fbed50;_x000D_
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);_x000D_
  color: #000;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.today:hover,_x000D_
.datepicker table tr td.today:hover:hover,_x000D_
.datepicker table tr td.today.disabled:hover,_x000D_
.datepicker table tr td.today.disabled:hover:hover,_x000D_
.datepicker table tr td.today:active,_x000D_
.datepicker table tr td.today:hover:active,_x000D_
.datepicker table tr td.today.disabled:active,_x000D_
.datepicker table tr td.today.disabled:hover:active,_x000D_
.datepicker table tr td.today.active,_x000D_
.datepicker table tr td.today:hover.active,_x000D_
.datepicker table tr td.today.disabled.active,_x000D_
.datepicker table tr td.today.disabled:hover.active,_x000D_
.datepicker table tr td.today.disabled,_x000D_
.datepicker table tr td.today:hover.disabled,_x000D_
.datepicker table tr td.today.disabled.disabled,_x000D_
.datepicker table tr td.today.disabled:hover.disabled,_x000D_
.datepicker table tr td.today[disabled],_x000D_
.datepicker table tr td.today:hover[disabled],_x000D_
.datepicker table tr td.today.disabled[disabled],_x000D_
.datepicker table tr td.today.disabled:hover[disabled] {_x000D_
  background-color: #fdf59a;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.today:active,_x000D_
.datepicker table tr td.today:hover:active,_x000D_
.datepicker table tr td.today.disabled:active,_x000D_
.datepicker table tr td.today.disabled:hover:active,_x000D_
.datepicker table tr td.today.active,_x000D_
.datepicker table tr td.today:hover.active,_x000D_
.datepicker table tr td.today.disabled.active,_x000D_
.datepicker table tr td.today.disabled:hover.active {_x000D_
  background-color: #fbf069 \9;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.today:hover:hover {_x000D_
  color: #000;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.today.active:hover {_x000D_
  color: #fff;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.range,_x000D_
.datepicker table tr td.range:hover,_x000D_
.datepicker table tr td.range.disabled,_x000D_
.datepicker table tr td.range.disabled:hover {_x000D_
  background: #eee;_x000D_
  -webkit-border-radius: 0;_x000D_
  -moz-border-radius: 0;_x000D_
  border-radius: 0;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.range.today,_x000D_
.datepicker table tr td.range.today:hover,_x000D_
.datepicker table tr td.range.today.disabled,_x000D_
.datepicker table tr td.range.today.disabled:hover {_x000D_
  background-color: #f3d17a;_x000D_
  background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);_x000D_
  background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);_x000D_
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));_x000D_
  background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);_x000D_
  background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);_x000D_
  background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);_x000D_
  background-repeat: repeat-x;_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);_x000D_
  border-color: #f3e97a #f3e97a #edde34;_x000D_
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);_x000D_
  -webkit-border-radius: 0;_x000D_
  -moz-border-radius: 0;_x000D_
  border-radius: 0;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.range.today:hover,_x000D_
.datepicker table tr td.range.today:hover:hover,_x000D_
.datepicker table tr td.range.today.disabled:hover,_x000D_
.datepicker table tr td.range.today.disabled:hover:hover,_x000D_
.datepicker table tr td.range.today:active,_x000D_
.datepicker table tr td.range.today:hover:active,_x000D_
.datepicker table tr td.range.today.disabled:active,_x000D_
.datepicker table tr td.range.today.disabled:hover:active,_x000D_
.datepicker table tr td.range.today.active,_x000D_
.datepicker table tr td.range.today:hover.active,_x000D_
.datepicker table tr td.range.today.disabled.active,_x000D_
.datepicker table tr td.range.today.disabled:hover.active,_x000D_
.datepicker table tr td.range.today.disabled,_x000D_
.datepicker table tr td.range.today:hover.disabled,_x000D_
.datepicker table tr td.range.today.disabled.disabled,_x000D_
.datepicker table tr td.range.today.disabled:hover.disabled,_x000D_
.datepicker table tr td.range.today[disabled],_x000D_
.datepicker table tr td.range.today:hover[disabled],_x000D_
.datepicker table tr td.range.today.disabled[disabled],_x000D_
.datepicker table tr td.range.today.disabled:hover[disabled] {_x000D_
  background-color: #f3e97a;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.range.today:active,_x000D_
.datepicker table tr td.range.today:hover:active,_x000D_
.datepicker table tr td.range.today.disabled:active,_x000D_
.datepicker table tr td.range.today.disabled:hover:active,_x000D_
.datepicker table tr td.range.today.active,_x000D_
.datepicker table tr td.range.today:hover.active,_x000D_
.datepicker table tr td.range.today.disabled.active,_x000D_
.datepicker table tr td.range.today.disabled:hover.active {_x000D_
  background-color: #efe24b \9;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.selected,_x000D_
.datepicker table tr td.selected:hover,_x000D_
.datepicker table tr td.selected.disabled,_x000D_
.datepicker table tr td.selected.disabled:hover {_x000D_
  background-color: #9e9e9e;_x000D_
  background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);_x000D_
  background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);_x000D_
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));_x000D_
  background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);_x000D_
  background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);_x000D_
  background-image: linear-gradient(to bottom, #b3b3b3, #808080);_x000D_
  background-repeat: repeat-x;_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);_x000D_
  border-color: #808080 #808080 #595959;_x000D_
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);_x000D_
  color: #fff;_x000D_
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);_x000D_
}_x000D_
_x000D_
.datepicker table tr td.selected:hover,_x000D_
.datepicker table tr td.selected:hover:hover,_x000D_
.datepicker table tr td.selected.disabled:hover,_x000D_
.datepicker table tr td.selected.disabled:hover:hover,_x000D_
.datepicker table tr td.selected:active,_x000D_
.datepicker table tr td.selected:hover:active,_x000D_
.datepicker table tr td.selected.disabled:active,_x000D_
.datepicker table tr td.selected.disabled:hover:active,_x000D_
.datepicker table tr td.selected.active,_x000D_
.datepicker table tr td.selected:hover.active,_x000D_
.datepicker table tr td.selected.disabled.active,_x000D_
.datepicker table tr td.selected.disabled:hover.active,_x000D_
.datepicker table tr td.selected.disabled,_x000D_
.datepicker table tr td.selected:hover.disabled,_x000D_
.datepicker table tr td.selected.disabled.disabled,_x000D_
.datepicker table tr td.selected.disabled:hover.disabled,_x000D_
.datepicker table tr td.selected[disabled],_x000D_
.datepicker table tr td.selected:hover[disabled],_x000D_
.datepicker table tr td.selected.disabled[disabled],_x000D_
.datepicker table tr td.selected.disabled:hover[disabled] {_x000D_
  background-color: #808080;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.selected:active,_x000D_
.datepicker table tr td.selected:hover:active,_x000D_
.datepicker table tr td.selected.disabled:active,_x000D_
.datepicker table tr td.selected.disabled:hover:active,_x000D_
.datepicker table tr td.selected.active,_x000D_
.datepicker table tr td.selected:hover.active,_x000D_
.datepicker table tr td.selected.disabled.active,_x000D_
.datepicker table tr td.selected.disabled:hover.active {_x000D_
  background-color: #666666 \9;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.active,_x000D_
.datepicker table tr td.active:hover,_x000D_
.datepicker table tr td.active.disabled,_x000D_
.datepicker table tr td.active.disabled:hover {_x000D_
  background-color: #006dcc;_x000D_
  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));_x000D_
  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-repeat: repeat-x;_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);_x000D_
  border-color: #0044cc #0044cc #002a80;_x000D_
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);_x000D_
  color: #fff;_x000D_
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);_x000D_
}_x000D_
_x000D_
.datepicker table tr td.active:hover,_x000D_
.datepicker table tr td.active:hover:hover,_x000D_
.datepicker table tr td.active.disabled:hover,_x000D_
.datepicker table tr td.active.disabled:hover:hover,_x000D_
.datepicker table tr td.active:active,_x000D_
.datepicker table tr td.active:hover:active,_x000D_
.datepicker table tr td.active.disabled:active,_x000D_
.datepicker table tr td.active.disabled:hover:active,_x000D_
.datepicker table tr td.active.active,_x000D_
.datepicker table tr td.active:hover.active,_x000D_
.datepicker table tr td.active.disabled.active,_x000D_
.datepicker table tr td.active.disabled:hover.active,_x000D_
.datepicker table tr td.active.disabled,_x000D_
.datepicker table tr td.active:hover.disabled,_x000D_
.datepicker table tr td.active.disabled.disabled,_x000D_
.datepicker table tr td.active.disabled:hover.disabled,_x000D_
.datepicker table tr td.active[disabled],_x000D_
.datepicker table tr td.active:hover[disabled],_x000D_
.datepicker table tr td.active.disabled[disabled],_x000D_
.datepicker table tr td.active.disabled:hover[disabled] {_x000D_
  background-color: #0044cc;_x000D_
}_x000D_
_x000D_
.datepicker table tr td.active:active,_x000D_
.datepicker table tr td.active:hover:active,_x000D_
.datepicker table tr td.active.disabled:active,_x000D_
.datepicker table tr td.active.disabled:hover:active,_x000D_
.datepicker table tr td.active.active,_x000D_
.datepicker table tr td.active:hover.active,_x000D_
.datepicker table tr td.active.disabled.active,_x000D_
.datepicker table tr td.active.disabled:hover.active {_x000D_
  background-color: #003399 \9;_x000D_
}_x000D_
_x000D_
.datepicker table tr td span {_x000D_
  display: block;_x000D_
  width: 23%;_x000D_
  height: 54px;_x000D_
  line-height: 54px;_x000D_
  float: left;_x000D_
  margin: 1%;_x000D_
  cursor: pointer;_x000D_
  -webkit-border-radius: 4px;_x000D_
  -moz-border-radius: 4px;_x000D_
  border-radius: 4px;_x000D_
}_x000D_
_x000D_
.datepicker table tr td span:hover,_x000D_
.datepicker table tr td span.focused {_x000D_
  background: #eee;_x000D_
}_x000D_
_x000D_
.datepicker table tr td span.disabled,_x000D_
.datepicker table tr td span.disabled:hover {_x000D_
  background: none;_x000D_
  color: #999;_x000D_
  cursor: default;_x000D_
}_x000D_
_x000D_
.datepicker table tr td span.active,_x000D_
.datepicker table tr td span.active:hover,_x000D_
.datepicker table tr td span.active.disabled,_x000D_
.datepicker table tr td span.active.disabled:hover {_x000D_
  background-color: #006dcc;_x000D_
  background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));_x000D_
  background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: -o-linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-image: linear-gradient(to bottom, #08c, #0044cc);_x000D_
  background-repeat: repeat-x;_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);_x000D_
  border-color: #0044cc #0044cc #002a80;_x000D_
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);_x000D_
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);_x000D_
  color: #fff;_x000D_
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);_x000D_
}_x000D_
_x000D_
.datepicker table tr td span.active:hover,_x000D_
.datepicker table tr td span.active:hover:hover,_x000D_
.datepicker table tr td span.active.disabled:hover,_x000D_
.datepicker table tr td span.active.disabled:hover:hover,_x000D_
.datepicker table tr td span.active:active,_x000D_
.datepicker table tr td span.active:hover:active,_x000D_
.datepicker table tr td span.active.disabled:active,_x000D_
.datepicker table tr td span.active.disabled:hover:active,_x000D_
.datepicker table tr td span.active.active,_x000D_
.datepicker table tr td span.active:hover.active,_x000D_
.datepicker table tr td span.active.disabled.active,_x000D_
.datepicker table tr td span.active.disabled:hover.active,_x000D_
.datepicker table tr td span.active.disabled,_x000D_
.datepicker table tr td span.active:hover.disabled,_x000D_
.datepicker table tr td span.active.disabled.disabled,_x000D_
.datepicker table tr td span.active.disabled:hover.disabled,_x000D_
.datepicker table tr td span.active[disabled],_x000D_
.datepicker table tr td span.active:hover[disabled],_x000D_
.datepicker table tr td span.active.disabled[disabled],_x000D_
.datepicker table tr td span.active.disabled:hover[disabled] {_x000D_
  background-color: #0044cc;_x000D_
}_x000D_
_x000D_
.datepicker table tr td span.active:active,_x000D_
.datepicker table tr td span.active:hover:active,_x000D_
.datepicker table tr td span.active.disabled:active,_x000D_
.datepicker table tr td span.active.disabled:hover:active,_x000D_
.datepicker table tr td span.active.active,_x000D_
.datepicker table tr td span.active:hover.active,_x000D_
.datepicker table tr td span.active.disabled.active,_x000D_
.datepicker table tr td span.active.disabled:hover.active {_x000D_
  background-color: #003399 \9;_x000D_
}_x000D_
_x000D_
.datepicker table tr td span.old,_x000D_
.datepicker table tr td span.new {_x000D_
  color: #999;_x000D_
}_x000D_
_x000D_
.datepicker .datepicker-switch {_x000D_
  width: 145px;_x000D_
}_x000D_
_x000D_
.datepicker .datepicker-switch,_x000D_
.datepicker .prev,_x000D_
.datepicker .next,_x000D_
.datepicker tfoot tr th {_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
.datepicker .datepicker-switch:hover,_x000D_
.datepicker .prev:hover,_x000D_
.datepicker .next:hover,_x000D_
.datepicker tfoot tr th:hover {_x000D_
  background: #eee;_x000D_
}_x000D_
_x000D_
.datepicker .prev.disabled,_x000D_
.datepicker .next.disabled {_x000D_
  visibility: hidden;_x000D_
}_x000D_
_x000D_
.datepicker .cw {_x000D_
  font-size: 10px;_x000D_
  width: 12px;_x000D_
  padding: 0 2px 0 5px;_x000D_
  vertical-align: middle;_x000D_
}_x000D_
_x000D_
.input-append.date .add-on,_x000D_
.input-prepend.date .add-on {_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
.input-append.date .add-on i,_x000D_
.input-prepend.date .add-on i {_x000D_
  margin-top: 3px;_x000D_
}_x000D_
_x000D_
.input-daterange input {_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
.input-daterange input:first-child {_x000D_
  -webkit-border-radius: 3px 0 0 3px;_x000D_
  -moz-border-radius: 3px 0 0 3px;_x000D_
  border-radius: 3px 0 0 3px;_x000D_
}_x000D_
_x000D_
.input-daterange input:last-child {_x000D_
  -webkit-border-radius: 0 3px 3px 0;_x000D_
  -moz-border-radius: 0 3px 3px 0;_x000D_
  border-radius: 0 3px 3px 0;_x000D_
}_x000D_
_x000D_
.input-daterange .add-on {_x000D_
  display: inline-block;_x000D_
  width: auto;_x000D_
  min-width: 16px;_x000D_
  height: 20px;_x000D_
  padding: 4px 5px;_x000D_
  font-weight: normal;_x000D_
  line-height: 20px;_x000D_
  text-align: center;_x000D_
  text-shadow: 0 1px 0 #fff;_x000D_
  vertical-align: middle;_x000D_
  background-color: #eee;_x000D_
  border: 1px solid #ccc;_x000D_
  margin-left: -5px;_x000D_
  margin-right: -5px;_x000D_
}_x000D_
_x000D_
.datepicker.dropdown-menu {_x000D_
  position: absolute;_x000D_
  top: 100%;_x000D_
  left: 0;_x000D_
  z-index: 1000;_x000D_
  float: left;_x000D_
  display: none;_x000D_
  min-width: 160px;_x000D_
  list-style: none;_x000D_
  background-color: #fff;_x000D_
  border: 1px solid #ccc;_x000D_
  border: 1px solid rgba(0, 0, 0, 0.2);_x000D_
  -webkit-border-radius: 5px;_x000D_
  -moz-border-radius: 5px;_x000D_
  border-radius: 5px;_x000D_
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);_x000D_
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);_x000D_
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);_x000D_
  -webkit-background-clip: padding-box;_x000D_
  -moz-background-clip: padding;_x000D_
  background-clip: padding-box;_x000D_
  *border-right-width: 2px;_x000D_
  *border-bottom-width: 2px;_x000D_
  color: #333333;_x000D_
  font-size: 13px;_x000D_
  line-height: 20px;_x000D_
}_x000D_
_x000D_
.datepicker.dropdown-menu th,_x000D_
.datepicker.datepicker-inline th,_x000D_
.datepicker.dropdown-menu td,_x000D_
.datepicker.datepicker-inline td {_x000D_
  padding: 4px 5px;_x000D_
}_x000D_
_x000D_
_x000D_
/*# sourceMappingURL=bootstrap-datepicker.standalone.css.map */
_x000D_ 
<!-- Require libs to show example -->_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>_x000D_
_x000D_
<!-- Simple form with two text fields -->_x000D_
<form>_x000D_
  <input name="foo" type=text value="Click to see keyboard" />_x000D_
  <br/><br/><br/>_x000D_
  <input name="date" type=text />_x000D_
</form>
_x000D_
_x000D_
_x000D_

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

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

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

HTML

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

SCRIPT

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

Source: Stackoverflow.com

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to android

• Under what circumstances can I call findViewById with an Options Menu / Action Bar item? • How to implement a simple scenario the OO way • My eclipse won't open, i download the bundle pack it keeps saying error log • getting " (1) no such column: _id10 " error • java doesn't run if structure inside of onclick listener • Cannot retrieve string(s) from preferences (settings) • strange error in my Animation Drawable • how to put image in a bundle and pass it to another activity • FragmentActivity to Fragment • A failure occurred while executing com.android.build.gradle.internal.tasks

Examples related to keyboard

• How do I check if a Key is pressed on C++ • Move a view up only when the keyboard covers an input field • Move textfield when keyboard appears swift • Xcode iOS 8 Keyboard types not supported • Xcode 6: Keyboard does not show up in simulator • How to dismiss keyboard iOS programmatically when pressing return • Detect key input in Python • Getting Keyboard Input • Press Keyboard keys using a batch file • Keylistener in Javascript

Tags

Root Custom-tags Autoscalemode Bipartite Font-editor Databasescripting Viewport Fedora11 Resizegrip Modal-popup Gml Loadoptions Reek Hessian Applicationdomain Scriptom Code-size Event-delegation Rtcp Jqgrid-php Autodiscovery Autorelease Wcsf Typelist Channel Writeonly Cvs2svn Yield-keyword Relate Apache-karaf Diff Action-caching Xaf Ondemand Fdopen Datakey Compiled-language Pathinfo Pointcuts Winscp Complex-event-processing Datamodule Regex-group Pyserial Window-handles Cgdb Awtrobot Scalatra Diamond-operator Portable-applications Slackware Roaming-profile Pingfederate Evernote Jdwp Nsopenpanel Build-process Triangle-count Spanned Has-one Paint Omniauth Master-data-management Inserter Filesystems Tweener Mylyn Usagepatterns Slashdot Rbind Check-constraint Poisson Dotnetnuke-5 Dataview Procedural-generation Contract Ole-automation Setneedsdisplayinrect Magpie Microkernel Android-appcompat Deployment-target Gist Actionfilterattribute Usability Bicubic Gpgpu Makefile-project Database-versioning Custom-validators Zend-studio Thin Awe Vtune Css-validator Android-contentresolver Assemblies Design-time-data Rank Ipod-touch