本文详解如何在Web页面中通过JavaScript实现按回车键触发后台事件。针对IE与Firefox等浏览器在键盘事件属性(keyCode、which、charCode)上的差异,提供了原生JS的兼容写法,并分析了单文本框回车刷新页面的现象及隐藏控件解决方法。
JS实现回车触发后台事件的兼容性问题与解决方案
需求是实现输入密码后按下回车键,从而触发后台事件。这一看似简单的功能在实际开发中却容易遇到各种兼容性问题。
页面结构主要包含一个密码输入文本框和一个用于触发后台事件的按钮。
问题一:当TextBox文本框获得焦点后直接按回车,页面会发生刷新。 经过代码排查发现,当页面中仅存在一个文本框控件时,按下回车键会导致页面刷新。 解决方法:在页面中添加一个隐藏的TextBox控件。 具体原理尚不明确。
问题二:使用Jquery实现该方法。
$(document).ready(function(){
$("#tbPassword").focus();
$('#bPassword').keydown(function(e){
if(e.keyCode == 13){
$("#ctl00_ContentBody_btnAccept_linkButton")[0].click();
}
});
});
由于某些原因无法采用Jquery方案,只能改用原生JS,此时浏览器的兼容性问题便成为最大的难点。
document.getElementByIdx_x_x("tbPassword").onkeypress = function(event){
var keynum;
if(window.event) // IE
{
keynum = window.event.keyCode;
}
else if(event.which) // Netscape/Firefox/Opera
{
keynum = event.which;
}
if (keynum == 13)
document.getElementByIdx_x_x('ctl00_ContentBody_btnAccept_linkButton').click();
}
具体说明如下:
在IE浏览器中读取键盘按键的代码示例:
keynum = event.keyCode; // 字母d,keynum=100
keychar = String.fromCharCode(keynum); // 将keynum转换成字符d
在FireFox浏览器中读取键盘按键的代码示例:
keynum = event.which; // 字母d,keynum=100
keychar = String.fromCharCode(keynum); // 将keynum转换成字符d
例如在IE中,仅包含keyCode属性;而在FireFox中,则同时存在which和charCode属性;Opera浏览器中则包含keyCode和which属性等。
因此,Jquery内部已经处理了这种跨浏览器的兼容性问题。
以上就是本文的全部内容,希望对大家的学习有所帮助。