Making soft keyboard automatically disappear once user submits a form on a mobile device

Question

This is about a regular responsive website with a dictionary lookup feature. The page consists of an input text box and an adjoining submit button. Currently if you open the page in a mobile browser and tap on the text box, the soft keyboard fires up automatically which is desirable. What's not desirable though is that the keyboard stays up even after the user taps on the enter key on the soft keyboard. I know there's got to be some method to change that. Does this situation calls for a special Android/iOS-specific library or something? Can I just add something to the button's onclick() to make it happen? If so, what function can one use? Do note that the keyboard disappears fine when the on-page submit button is tapped...it's just the soft keyboard enter key that's not having an effect on itself even though it does successfully submits the form.

I have tried the following and failed:

function lookup_check(lookupterm){
    close_kb();
    $('#word').blur();
    if(lookupterm != ""){ lookup_word(lookupterm); }
    else{
        var testing = $('#word');
        testing.addClass('empty');
        setTimeout(function(){ testing.removeClass('empty'); },500);
    }
}

The HTML calling the above function goes:

<button class="btn btn-lg btn-primary lookup-submit" type="submit" id="lookup" onclick="lookup_check($('#word').val());" style="display: inline-block;">Lookup</button>

P.S.: Just so we're absolutely sure, this is a desktop website and not an app.

Update: The accepted answer on the thread proposed by @NovaLogic is already stated to not work consistently across all versions of Android. Besides, I am looking for some way to accomplish this on not just Android but also on iOS/Windows devices. So, no, this question is NOT a duplicate.

You could just use `$(form).on('submit', function() { $(input).blur(); });` — Novocaine, Dec 11 '15 at 16:23
Possible duplicate of [How can I hide the Android keyboard using JavaScript?](http://stackoverflow.com/questions/8335834/how-can-i-hide-the-android-keyboard-using-javascript) — NovaLogic, Dec 11 '15 at 16:26
@Novocaine: I already tried the `$('#word').blur;` trick hoping it would take focus away from the text box but the keyboard stays put. :/ — TheLearner, Dec 11 '15 at 16:27
That sounds like a bug in your test device then. That's worked for me in the past. — Novocaine, Dec 11 '15 at 16:33
you're actually using `$('#word').blur();` not `$('#word').blur;` as you typed above, correct? — Brandt Solovij, Dec 11 '15 at 16:34
@BrandtSolovij: I just updated my question with the exact code I have used. — TheLearner, Dec 11 '15 at 16:37
@Novocaine: Could you please post your comment as an answer? I just got it to work by adding the `blur()` method directly to the button's HTML tag. Still confused as to why it refused to work when inside the JS function being called but that's okay. — TheLearner, Dec 11 '15 at 16:47

score 1 · Accepted Answer · edited Dec 16 '15 at 18:50

1

You could just use

$('form').on('submit', function() {
  $('input').blur();
});

To lose focus on the button once submitted

edited Dec 16 '15 at 18:50

Siyual

16,415
8
44
58

answered Dec 11 '15 at 16:49

Novocaine

4,692
4
44
66

Thank you tons for the quick and clean help! Cheers. :) – TheLearner Dec 11 '15 at 16:49

score 1 · Answer 2 · answered Jun 14 '20 at 14:11

I came here when looking to solve the same issue in my React app. So providing an answer without jquery.

Hope this would be helpful for others that face similar issue.

The solution is to make the active input element blur when the user taps the "Go" button / icon in the soft / virtual keyboard.

This will make the virtual keyboard disappear.

Example

Suppose you have the following form:

<form onSubmit={this.handleSubmit}>
  <input aria-label="Search site" autoCorrect="off" id="my-input-box"
    placeholder="Search country..."
    type="search"/>
  <input type="submit" value="Submit">
</form>

The example onsubmit handler to make the virtual keyboard disappear:

handleSubmit = (event) => {
  event.preventDefault();  // Prevent default action of submitting data to web server
  document.activeElement.blur();
}

Alternatively, you could get the element by id and blur it.

handleSubmit = (event) => {
  event.preventDefault();  // Prevent default action of submitting data to web server
  const myInputBox = document.getElementById('my-input-box');
  if (myInputBox) {
    myInputBox.blur();
  }
}

Making soft keyboard automatically disappear once user submits a form on a mobile device

2 Answers2

Example