Javascript: enter in input element with strange behaviour on firefox

Question

I have a html form with a select, button and an input element.

<form action="">
    <button>innocent button</button>
    <select multiple name="multiple">
    <option selected value="a">A</option>
    <option value="b">B</option>
</select>
<input style="width:300px" type="text" value="press here enter and look at the multiple select" name="" />
</form>

and some jquery javascript

$(document).ready(function(){
            console.log('hi');


            var $button = $('button');

            $button.on('click',function(e){

                $('select option').first().attr('selected',false);
                e.preventDefault();

            });

Demo: try it here: http://jsfiddle.net/3Rjdh/

On Chrome everything is okay. But on Firefox: If you press ENTER in the input field, the select element loses it's selected.

What is wrong with Firefox?

The form is being submitted, you are seeing a page refresh. The same thing will also happen in other browsers such as Safari. — RobG, Sep 14 '12 at 12:19

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

When you press enter on the input, you are effectively firing the click event of the button, trying putting a conole.log in there and you'd see it fire

You can stop the submission by doing something this

  function stopSubmit(e){
      e = e || event;
      return (e.keyCode || event.which || event.charCode || 0) !== 13;
   }

Then in your form add the event for keypress

    <form onkeypress="return stopSubmit(event)">

See the updated fiddle

edited May 23 '17 at 11:59

Community

1
1

answered Sep 14 '12 at 12:25

Hazem Salama

14,891
5
27
31

and how can I prevent firing the click event on the button? – christianhaller Sep 14 '12 at 12:28
@christianhaller Maybe I am missing your objective here, but your form is still being submitted (FF15/Win) – Hazem Salama Sep 14 '12 at 12:50

score 0 · Accepted Answer · answered Sep 14 '12 at 12:43

0

I think, I fixed it by adding the attribute type with value button

http://jsfiddle.net/3Rjdh/2/

answered Sep 14 '12 at 12:43

christianhaller

83
4

Maybe I am missing your objective here, but your form is still being submitted (FF15/Win) – Hazem Salama Sep 14 '12 at 12:49
In the first fiddle, the – christianhaller Sep 14 '12 at 13:02

Javascript: enter in input element with strange behaviour on firefox

2 Answers2