你的位置: 首页 > HTML5网站开发 > 正文
button按钮绑定回车键触发事件的js及jQuery应用示例
作者:漫游   分类: HTML5网站开发    时间:2013-3-1 15:46   热度:22701°   字号:        评论:0 
作者:漫游   分类: HTML5网站开发    时间:2013-3-1 15:46   热度:22701°  评论:0 条 

很多时候,我们为一个表单中的button写了事件,但它不是submit,不能实现按回车键提交表单,那么就要为这个添加绑定事件了。


html代码片段如下:

<tr>

<td><input type="text" name="title"></td>

<td><input type="button" name="button" class="but" id="but"></td>

</tr>


JS示例:


function BindEnter() {

 if (event.keyCode == 13) {

     event.cancelBubble = true;

     event.returnValue = false;

         document.getElementById('but').click();

   }

}

咱们可以把BindEnter() 事件绑定在input上,上面的html代码第2行改写成:


<td><input type="text" name="title" onkeypress="BindEnter();"></td>


jQuery示例:

$(".but").click(function(){

//具体功能代码略

})

$("input[type='text']").keypress(function(e){
  if (event.keyCode == 13) {
    event.cancelBubble = true;
    event.returnValue = false;
    $(this).parents("tr").find(".but").click();
  }
})

使用class来标识按钮,这样具有更强的兼容性,比如有很多行类似的<tr>的数据时,每行一个按钮。


瞧瞧上一篇文章去!   瞧瞧下一篇文章去!
本文标签: javascript
二维码加载中...
本文作者:漫游      文章标题: button按钮绑定回车键触发事件的js及jQuery应用示例
本文地址:http://www.roammemo.com/html5/122.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。
返回顶部    首页    手机版本   
版权所有:漫游的备忘录    站长: 漫游    模板基于:博闻广记 v1.2   程序:emlog