Pressing enter to submit a form when the submit button is not visible is functional in Firefox, but has no effect in Chrome

Question

Pressing enter to submit a form when the submit button is not visible is functional in Firefox, but has no effect in Chrome

There is a form with various input fields and a hidden submit button (hidden using style="display:none").

Interestingly, in Firefox, pressing the return key while an input field is focused automatically submits the form.

However, in Chrome, hitting return does not trigger any action. Is there a way to reintroduce this functionality in Chrome?

If you'd like to test this out yourself, check out the form in Chrome here: http://jsfiddle.net/B59rV/2/

<form method="post" action="/xxxx" accept-charset="UTF-8">

    <input type="hidden" value="SSjovFqEfRwz2vYDIsB6JRdtLAuXGmnT+tkyZnrtqEE=" name="authenticity_token">

    <div class="input text_field">
    <label>Email</label>
    <input type="text" size="30" name="user_session[email]" />
  </div>

  <div class="input text_field">
    <label>Password</label>
    <input type="password" size="30" name="user_session[password]" />
  </div>


    <input type="submit" value="Sign In" style="display: none;" >

</form>

javascript html css forms google-chrome

Answer 1

Answer №1

I can't figure out why it's not functioning properly in Chrome. It seems like there might be a bug causing the issue.

But somehow, it's related to that display: none property.

I came up with a messy workaround:

input[type="submit"] {
    position: absolute;
    top: -1000px
}

Instead of hiding it, I moved it off the visible screen.

See Demo Here - works fine in Chrome.

Answer 2

I can't figure out why it's not functioning properly in Chrome. It seems like there might be a bug causing the issue.

But somehow, it's related to that display: none property.

I came up with a messy workaround:

input[type="submit"] {
    position: absolute;
    top: -1000px
}

Instead of hiding it, I moved it off the visible screen.

See Demo Here - works fine in Chrome.

Answer 3

Answer №2

After conducting tests on Chrome 22 and Firefox 18, it seems like this workaround may be the most effective solution

.hide-submit {
    position: absolute;
    visibility: hidden;
}

<button type="submit" class="hide-submit">Ok</button>

Alternatively, a more versatile approach could be used

input[type=submit].hide,
button[type=submit].hide {
    display: block;
    position: absolute;
    visibility: hidden;
}

<input type="submit" class="hide">Go</input>

This method essentially conceals the element in plain sight without the need to push it off-screen

Answer 4

After conducting tests on Chrome 22 and Firefox 18, it seems like this workaround may be the most effective solution

.hide-submit {
    position: absolute;
    visibility: hidden;
}

<button type="submit" class="hide-submit">Ok</button>

Alternatively, a more versatile approach could be used

input[type=submit].hide,
button[type=submit].hide {
    display: block;
    position: absolute;
    visibility: hidden;
}

<input type="submit" class="hide">Go</input>

This method essentially conceals the element in plain sight without the need to push it off-screen

Answer 5

Answer №3

The most effective approach is outlined below:

<input type="submit" hidden />

For instance:

<form onSubmit="event.preventDefault(); alert('logging in!')">
  <label for="email">email:</label>
  <input type="email" name="email" required />

  <label for="password">password:</label>
  <input type="password" name="password" required />

  <input type="submit" hidden />

  <p>Press enter to log in</p>
</form>

Answer 6

The most effective approach is outlined below:

<input type="submit" hidden />

For instance:

<form onSubmit="event.preventDefault(); alert('logging in!')">
  <label for="email">email:</label>
  <input type="email" name="email" required />

  <label for="password">password:</label>
  <input type="password" name="password" required />

  <input type="submit" hidden />

  <p>Press enter to log in</p>
</form>

Answer 7

Answer №4

It seems like a built-in security measure, although no definitive explanation has been found yet. I conducted a test using http://jsfiddle.net/B59rV/2/ without the password field and the alert popped up as expected. This behavior was also observed in IE8. These are the only browsers currently available on my machine, so I haven't tested it on any others.

Answer 8

It seems like a built-in security measure, although no definitive explanation has been found yet. I conducted a test using http://jsfiddle.net/B59rV/2/ without the password field and the alert popped up as expected. This behavior was also observed in IE8. These are the only browsers currently available on my machine, so I haven't tested it on any others.

Answer 9

Answer №5

In my search for a solution, I stumbled upon a quirky workaround that involves setting the width and height properties to 0. Surprisingly, Chrome doesn't treat this as hiding the element entirely.

Answer 10

In my search for a solution, I stumbled upon a quirky workaround that involves setting the width and height properties to 0. Surprisingly, Chrome doesn't treat this as hiding the element entirely.

Answer 11

Answer №6

Similar to Pioul's response, I found it necessary to implement the following adjustments for an element with input[type=file]:

position:absolute; //using this property ensures that the "hidden" element does not disrupt the layout
width:0;
height:0;
// In versions up to IE7, a small portion of the form element remains visible
// to hide it, utilize opacity=0; The tested element was input:file.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

This method has NOT been tested with input[type=text].

While just an alternative approach, I do not believe it offers significant advantages over the approved solution.

Answer 12

Similar to Pioul's response, I found it necessary to implement the following adjustments for an element with input[type=file]:

position:absolute; //using this property ensures that the "hidden" element does not disrupt the layout
width:0;
height:0;
// In versions up to IE7, a small portion of the form element remains visible
// to hide it, utilize opacity=0; The tested element was input:file.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

This method has NOT been tested with input[type=text].

While just an alternative approach, I do not believe it offers significant advantages over the approved solution.

Pressing enter to submit a form when the submit button is not visible is functional in Firefox, but has no effect in Chrome

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the process for activating and deactivating the scroll trigger within Material UI's useScrollTrigger module?

Storing JavaScript variables in a database: A step-by-step guide

Error when using the array.filter() method with polygons

Obtain the URL value using jQuery and place it inside a <span> element

Guide to redirecting on click when utilizing an iframe

Creating a polished and stylish centered responsive image with Bootstrap 3

spinning camera around a globe with javascript and three.js

Issue with Vuex not functioning properly in Nuxt.js

Recovering antiquated submission script in JavaScript

How can I transform this in JavaScript so that it returns a Promise?

What is the best way to show a loading spinner as my Next image component loads, especially when there is an existing image already being displayed?

Sending a large number of values unrestrictedly via ajax

Tips for accessing every "results" (parameters) from an API

How can you assign a default value in a React select dropdown and dynamically add the remaining values?

Tap the mobile menu button twice to toggle the menu

Should we consider the implementation of private methods in Javascript to be beneficial?

Tips on inserting text into form input fields

Is there a way to properly access and interpret a .log extension file within a React component?

Triggering a Bootstrap 5 dropdown through code is only effective within the browser's developer console, rather than standard JavaScript implementation

Searching in real-time with ajax in CodeIgniter framework is a seamless and efficient process