Javascript – Pressing Enter/Return key doesn’t trigger button click in Safari

htmljavascriptsafaritwitter-bootstrap

I have a structure of the following format , which I display in a Bootstrap modal.

<div>
 <input type="text"/>
 <input type="text"/>
 <button class="jSomeButton" onclick="javascript: return false;"></button>
 <!--Click event handled in Javascript code-->
</div>

$(function(){
   $(".jSomeButton").on('click',function(){
      //Called from Firefox, Chrome and IE
      //Not called from Safari
   });
});

In Firefox, Chrome and IE when I press Enter/Return key after filling the inputs, the button click is triggered.
But in Safari [v4.0.3] , it doesn't trigger the button click! Rather it seems to postback to the same page.

Is this a known issue in Safari?
If yes, any workaround?
If no, could someone please help me with figuring out the root problem?

P.S. :
1. I'm familiar with the Javascript code for triggering button click on Enter keypress event. Just curious as to why the above won't work only in Safari.
2.Just for clarification, pressing Enter key while I'm still on the input control and not by pressing tab to first focus on the button and then press Enter.

Best Answer

Add the input fields and buttons to a form.

try using this but i m not sure about this is the right way to do it. in that case you better add two js listener functions to the input fields. as

` 

  <div>
     <input id="one" type="text"/>
     <input id="two" type="text"/>
     <button class="jSomeButton" onclick="javascript: return false;">               </button>
     <!--Click event handled in Javascript code-->
    </div>



$('#one').keypress(function(e){
if(e.which == 13) {
//call your code

 }
});

$('#two').keypress(function(e){
if(e.which == 13) {
///call your code
 }
});

better you write three listeners one for button other two for two input files. hope this ill help you. i am not sure about this solution. please let me know after trying it.

Related Topic