How can I hide the Android keyboard using JavaScript

Question

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

User · Answer

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   lt  -- Require libs to show example -- gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs bootstrap-datepicker 1 8 0 js bootstrap-datepicker min js  gt  lt  script gt  x000D   x000D   lt  -- Simple form with two text fields -- gt  x000D   lt form gt  x000D     lt input name  foo  type text value  Click to see keyboard    gt  x000D     lt br  gt  lt br  gt  lt br  gt  x000D     lt input name  date  type text   gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   lt script type  text javascript  gt  function hideAndroidKeyboard         Android hideKeyboard       lt  script gt    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

User · Answer

You can now use inputmode    none    on up to date browsers  See   https   developer mozilla org en-US docs Web HTML Global attributes inputmode

User · Answer

View view   this getCurrentFocus    if  view    null          InputMethodManager imm    InputMethodManager getSystemService Context INPUT METHOD SERVICE       imm hideSoftInputFromWindow view getWindowToken    0

User · Answer

VueJS One Liner   lt input type  quot text quot  ref  quot searchBox quot   keyup enter  quot  refs searchBox blur   quot    gt   Or you can hide it in JS with this  refs searchBox blur

User · Answer

Angular version  export component FooComponent      ViewChild  bsDatePicker   calendarInput  ElementRef     focus    void       const nativeElement   this calendarInput nativeElement       setTimeout      gt          nativeElement blur           100           and template   lt input     bsDatePicker    bsDatepicker    type  quot text quot      focus   quot focus   quot   gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 lt void gt    gt         TODO  use inputmode  quot none quot         eslint-disable-next-line no-restricted-globals   const activeElement   document activeElement    const inputType       activeElement instanceof HTMLInputElement         activeElement getAttribute  quot type quot           undefined     if       activeElement     null  amp  amp      activeElement instanceof HTMLElement  amp  amp         Don t bother with input types that we know don t trigger an OSK      inputType      quot checkbox quot   amp  amp      inputType      quot radio quot   amp  amp      inputType      quot submit quot   amp  amp      inputType      quot reset quot   amp  amp      inputType      quot button quot               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  quot data-oaf-keyboard-hack quot    quot true quot            Some older Android browsers need extra encouragement         See https   stackoverflow com a 11160055 2476884     const originalReadonly   activeElement getAttribute  quot readonly quot        const originalDisabled   activeElement getAttribute  quot disabled quot            eslint-disable-next-line functional immutable-data     activeElement setAttribute  quot readonly quot    quot true quot        if  activeElement instanceof HTMLTextAreaElement             eslint-disable-next-line functional immutable-data       activeElement setAttribute  quot disabled quot    quot true quot               return new Promise  resolve    gt          setTimeout      gt               Put things back the way we found them          originalReadonly     null             activeElement setAttribute  quot readonly quot   originalReadonly              activeElement removeAttribute  quot readonly quot             if  activeElement instanceof HTMLTextAreaElement              originalDisabled     null               activeElement setAttribute  quot disabled quot   originalDisabled                activeElement removeAttribute  quot disabled quot                       activeElement removeAttribute  quot data-oaf-keyboard-hack quot                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

User · Answer

HTML   lt input type  text  id  txtFocus  style  display none   gt    SCRIPT      txtFocus   show   focus   hide      msg   content    Alert using jquery msg

User · Answer

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

User · Answer

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

User · Answer

Just disable the form field   document getElementById  input   disabled

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Just blur the active focused input field     document activeElement  filter   input focus   blur

[javascript] How can I hide the Android keyboard using JavaScript?

Examples related to javascript

Examples related to android

Examples related to keyboard