网站页面回车和鼠标焦点


最近在开发中遇到一个问题,其实本是很简单的问题,可自己想半天也想不明白。
情况大致如下:
页面有个搜索框,再有个登录的表单,按回车时执行搜索呢还是执行表单提交,本来是个很容易的问题,可因当初写回车搜索的时候是直接写在页面上的,即只要回车就执行搜索。
大致代码如下:

1document.onkeydown(){//网页内按下回车触发
2if(event.keyCode==13)
3{
4search();//搜索事件
5}
6}

当时不知道为什么鬼使神差的写了上面这段代码,愚蠢啊!!也就是不管什么情况,按下回车就执行搜索。显然,这是错误的。关于回车搜索的流程应该是这样的:

也就是说,当焦点是在搜索选项的文本框时,回车才搜索,焦点不在文本框是回车无响应,这才是一个合理的设计。
那么实际但吗应该是这样的:

文本框:
<input type="text"  onkeydown="keydownsearch()"  />
js:
1functionkeydownsearch()
2{
3if(event.keyCode==13)
4{
5search();//搜索事件
6}
7}

实际使用中还是有问题,firefox浏览器不兼容。看来是firefox和IE回车事件不一样。
代码修改如下:

文本框:

<input type="text"  onkeydown="keydownsearch(event)"  />

js:

1functionkeydownsearch(evt)
2{
3evt=(evt)?evt:((window.event)?window.event:"")
4keyCode=evt.keyCode?evt.keyCode:(evt.which?evt.which:evt.charCode);
5if(keyCode==13){
6search();//搜索事件
7}
8}

修改完成,经测试,IE6\7\8,firefox,chrome都能兼容。

总结:
1、页面回车事件尽量不要写在document.onkeydown中,这样只要回车就会首先触发改JS事件,一般写在文本框中。
<input type="text" onkeydown="keydownsearch(event)" />
2、页面中如没有为按钮某按钮为焦点,回车后首先执行的是表单提交,也就是<input type="submit" />的服务器事件

优质内容筛选与推荐>>
1、知识库 编号:010
2、PhoneGap学习笔记(三) 加速计、罗盘、地理位置
3、readonly和disabled的区别
4、6.23-6.24 小结复习(文件上传 与 MYSQL的总结)
5、下一代 Bootstrap 的 5 个超酷特点


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号