HTML Mobile -forcing the soft keyboard to hide

Question

I am developing the front end site for a coupon company  and I have a page where the user only needs to input phone number and    spent  We came up with a fun on-screen keyboard built in Javascript  that is easy to use  and fast  However  I am looking for a solution to stop the soft keyboard from popping when the user focuses and enters text numbers in those fields    I know about the  number phone email  type attributes that HTML5 came up with  However  at the risk of sounding crazy  I really want to just use my on-screen keyboard   Note  this web site is mostly targeted to tablets     Thanks

User · Answer

example how i made it   After i fill a Maximum length it will blur from my  Field  and the Keyboard will disappear     if you have more than one field   you can just add the line that i add       var MaxLength   8        document  ready function                  MyTB   keyup function                  if    this  val   length  gt   MaxLength                       MyTB   blur                         MyTB2   focus

User · Answer

Since the soft keyboard is part of the OS  more often than not  you won t be able to hide it - also  on iOS  hiding the keyboard drops focus from the element   However  if you use the onFocus attribute on the input  and then blur   the text input immediately  the keyboard will hide itself and the onFocus event can set a variable to define which text input was focused last   Then alter your on-page keyboard to only alter the last-focused  check using the variable  text input  rather than simulating a key press

User · Answer

I am fighting the soft keyboard on the Honeywell Dolphin 70e with Android 4 0 3  I don t need the keyboard because the input comes from the builtin barcode reader through the  scanwedge   set to generate key events   What I found was that the trick described in the earlier answers of   input blur    input focus      works  but only once  right at page initialization  It puts the focus in the input element without showing the soft keyboard  It does NOT work later  e g  after a TAB character in the suffix of the barcode causes the onblur or oninput event on the input element   To read and process lots of barcodes  you may use a different postfix than TAB  9   e g  8  which is not interpreted by the browser  In the input keydown event  use e keyCode    8 to detect a complete barcode to be processed   This way  you initialize the page with focus in the input element  with keyboard hidden  all barcodes go to the input element  and the focus never leaves that element  Of course  the page cannot have other input elements  like buttons   because then you will not be able to return to the barcode input element with the soft keyboard hidden   Perhaps reloading the page after a button click may be able to hide the keyboard  So use ajax for fast processing of barcodes  and use a regular asp net button with PostBack to process a button click and reload the page to return focus to the barcode input with the keyboard hidden

User · Answer

Scott S s answer worked perfectly   I was coding a web-based phone dialpad for mobile  and every time the user would press a number on the keypad  composed of td span elements in a table   the softkeyboard would pop up  I also wanted the user to not be able to tap into the input box of the number being dialed  This actually solved both problems in 1 shot  The following was used    lt input type  text  id  phone-number  onfocus  blur       gt

User · Answer

I could not use some of the suggestions provided   In my case I had Google Chrome being used to display an Oracle APEX Application  There were some very specific input fields that allowed you to start typing a value and a list of values would begin to be displayed and reduced as you became more specific in your typing  Once you selected the item from the list of available options  the focus would still be on the input field   I found that my solution was easily accomplished with a custom event that throws a custom error like the following   throw  throwing a custom error exits input and hides keyboard

User · Answer

I am facing the same issue  I am able to hide android keyboard even focus is in textbox by just adding one css property    lt input type  text  style  pointer-events none    gt    and it works fine

User · Answer

For further readers searchers   As Rene Pot points out on this topic       By adding the attribute readonly  or readonly  readonly   to the input field you should prevent anyone typing anything in it  but still be able to launch a click event on it    With this method  you can avoid popping up the  soft  Keyboard and still launch click events   fill the input by any on-screen keyboard   This solution also works fine with date-time-pickers which generally already implement controls

User · Answer

Those answers aren t bad  but they are limited in that they don t actually allow you to enter data  We had a similar problem where we were using barcode readers to enter data into a field  but we wanted to suppress the keyboard    This is what I put together  it works pretty well   https   codepen io bobjase pen QrQQvd    lt  -- must be a select box with no children to suppress the keyboard -- gt  input   lt select id  hiddenField    gt    lt span id  fakecursor    gt    lt input type  text  readonly  readonly  id  visibleField    gt   lt div id  cursorMeasuringDiv    gt    hiddenField     height 17px     width 1px    position absolute    margin-left 3px    margin-top 2px    border none    border-width 0px 0px 0px 1px      cursorMeasuringDiv     position absolute    visibility hidden    margin 0px    padding 0px      hiddenField focus     border 1px solid gray      border-width 0px 0px 0px 1px    outline none    animation-name  cursor    animation-duration  1s    animation-iteration-count  infinite      keyframes cursor       from  opacity 0       to  opacity 1         whenever the visible field gets focused     visibleField   bind  focus   function e         silently shift the focus to the hidden select box       hiddenField   focus          cursorMeasuringDiv   css  font       visibleField   css  font             whenever the user types on his keyboard in the select box    which is natively supported for jumping to an  lt option gt      hiddenField   bind  keypress  function e         get the current value of the readonly field   var currentValue       visibleField   val          and append the key the user pressed into that field       visibleField   val currentValue   e key         cursorMeasuringDiv   text currentValue   e key         measure the width of the cursor offset   var offset   3    var textWidth       cursorMeasuringDiv   width          hiddenField   css  marginLeft  Math min offset textWidth     visibleField   width             When you click in the  lt input gt  box  it simulates a cursor in that box but really puts the focus on an empty  lt select gt  box  Select boxes naturally allow for keypresses to support jumping to an element in the list so it was only a matter of rerouting the keypress to the original input and offsetting the simulated cursor   This won t work for backspace  delete  etc    but we didn t need those  You could probably use jQuery s trigger to send the keyboard event directly to another input box somewhere but we didn t need to bother with that so I didn t do it

[javascript] HTML Mobile -forcing the soft keyboard to hide

Examples related to javascript

Examples related to html

Examples related to ipad

Examples related to tablet