在Safari浏览器中，按下回车键无法触发按钮点击事件。

Question

在Safari浏览器中，按下回车键无法触发按钮点击事件。

4

我有一个如下格式的结构，我在Bootstrap模态框中展示它。

<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
   });
});

在Firefox、Chrome和IE中，当我在填写输入框后按下回车键，按钮点击就会被触发。
但是，在Safari [v4.0.3]中，它不会触发按钮点击！相反，它似乎会重新加载同一页。

这是Safari中已知的问题吗？
如果是，有什么解决方法吗？
如果不是，能否请有经验的人帮助我找出根本问题？

P.S.：
1. 我熟悉JavaScript代码，可以在按下Enter键时触发按钮单击事件。只是好奇为什么上述方法在Safari中无法正常工作。
2. 仅供澄清，我是在输入控件上按下回车键，而不是先按Tab键聚焦到按钮，然后再按Enter键。

- Vandesh

你能分享你的整个代码给我们吗？这样我们才能帮助你。 - Devang Rathod

@DevangRathod：你是指整个标记吗？还有什么需要了解的吗？ - Vandesh

你的意思是实际上你想要什么结果？ - Devang Rathod

我已经发布了我的答案，请尝试并让我知道。 - Devang Rathod

@Vandesh，我认为你的每组输入都应该有一个表单，并且其中一个按钮应该具有提交操作类型。在这种情况下，按下任何输入字段上的回车键都应该启动按钮点击。此外，我尝试了确切的代码，在Safari中对我有效。（Windows系统。） - Sunny R Gupta

@所有人：似乎是浏览器问题。在Safari v5.x上运行良好，但在v4.x上不行。感谢大家的帮助。非常感激。将尝试深入研究4.x的问题。 - Vandesh

3个回答

0

不要使用class属性，而是使用id属性和onclick事件。

<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
   });
});

如果您不想添加ID，您可以将事件delegate到document，这样事件将在已定义类的DOM上工作。示例

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

- Devang Rathod

@Vandesh 是的，我已经检查了它的工作状态...请看编辑后的内容，这将使观点更加清晰明了。 - Devang Rathod

@Vandesh 你检查了吗？ - Devang Rathod

不行。对我来说不起作用。为什么这在你的Safari中可以运行，而之前的那个却不行？有任何逻辑上的解释吗？ - Vandesh

0

@Vandesh,

如评论中所述，我建议您在整个表单周围放置一个表单标签。请参考此JSFiddle以获取更多想法。

http://jsfiddle.net/JUryD/

我在Safari、Chrome、IE6+、Opera和Firefox 22+上尝试了这个。

如果你遇到其他问题，请告诉我。

以下是代码：

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

- Sunny R Gupta

您在什么版本上测试的？我在 Safari v4.0.3 上测试了一下，不起作用。 - Vandesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sarsarahman · Accepted Answer

请在表单中添加输入字段和按钮。

尝试使用以下方法，但我不确定这是否是正确的做法。在这种情况下，最好为输入字段添加两个JavaScript监听器函数，如下所示：

  <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
 }
});

最好为按钮编写三个监听器，另外两个监听器用于两个输入文件。希望这能帮助你。我不确定这个解决方案是否有效，请在尝试后让我知道。