CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapsafari
Vandesh
Vandesh

Reputation: 6894

Pressing Enter/Return key doesn't trigger button click in Safari

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.

Upvotes: 4

Views: 7740

Answers (3)

sarsarahman
sarsarahman

Reputation: 1088

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.

Upvotes: 3

Sunny R Gupta
Sunny R Gupta

Reputation: 5126

@Vandesh,

As posted in comments, I suggest you put up a form tag around your entire form. Have a look at this JSFiddle for more idea.

http://jsfiddle.net/JUryD/

I tried this on Safari, Chrome, IE6+, Opera and Firefox 22+

Let me know if you face any other troubles.

Here is the code:

<div>
 <form>            
  <input type="text"/>
  <input type="text"/>
  <button class="jSomeButton" onclick="javascript: return false;">Send</button>  
 </form>
</div>

Upvotes: 0

Devang Rathod
Devang Rathod

Reputation: 6736

Instead of class attribute use id attribute onclick event , 

<div>
 <input type="text"/>
 <input type="text"/>
 <button class="jSomeButton" id="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
   });
});

if you do not want to add ID you can delegate event to the document so event will work on DOM which has defined class.

Example

<script type="text/javascript">
$(function(){
    $(document).on('click', ".jSomeButton" ,function(){
        alert('works');
    });
});
</script>

Upvotes: 0

Related Questions