在表单输入上按回车键使其失去焦点

Question

I have a form with an input box and hidden submit field:

<form action="javascript:void(0);">
    <input type="text">
    <input type="submit" style="display:none;">
</form>

I would like to make it so that when you click enter, the input box simply loses focus.

How can I accomplish this?

Answer 1

Try this out. Please note that you need to include jquery file for this to work.

<form action="javascript:void(0);">
    <input type="text" id="txtFocus">
    <input type="submit" style="display:none;" id="btnHidden">
</form>
<script>
$("#btnHidden").on('click', function() {
        $('#txtFocus').blur();
});
</script>

Answer 2

Give your input an id for convenience, and you can do this with this little function using plain javascript

<form action="javascript:void(0);">
    <input id="input1" type="text">
    <input type="submit" style="display:none;">
</form>
<script>
document.getElementById('input1').addEventListener('keyup',function(e){
    if (e.which == 13) this.blur();
});
</script>

Answer 3

Avoid the ID lookup in the JS code by the following (tested on Firefox and Chrome). Submit by input loss of focus, possibly triggered by form submit.

 function myFunction(input) { input.value = input.value.toUpperCase(); return false; }

 <form onsubmit="this.textfield.blur();return false"> <input type="text" id="textfield" onfocusout="myFunction(this)"> <input type="submit" style="display:none;" /> </form>