在foxchat下,当用户按下回车键的时候,需要自动完成信息发送,这就需要监听,用户的按键操作。
头脑里第一个想法,就是使用jQuery来进行实现!现在把jQuery上的部分使用,摘录如下,以帮助不熟悉的
小伙伴,来系统了解该功能的使用。
方法签名共有三种形式,分别是:
.keypress() - 没有任何参数,在jQuery1.0就已经存在了。
.keypress(handler) - 包括一个方法处理,也是在jQuery1.0就存在了。
.kepress([eventData],handler) - 多了一个事件数据对象,可以让事件处理器来使用,该签名在jQuery1.4.3开始存在。
注意事项:
1,因为各大主流浏览器没有对keypress事件进行统一的标准化处理,因此,该方法会因为浏览器的不同,而出现不同的处理效果,比如ie可能就与google chrome的处理会存在部分区别。
2,on("keypress",handler) - 是上面三个方法签名种,后两个带参数的完整写法,而.trigger("keypress")则对应.keypress()无参方法的等同调用。
3,keypress虽然可以被赋给所有的dom树元素,但是只在可以得到输入焦点的元素上有效果,但是针对哪些元素可以算是可获取输入焦点方面,各大主流浏览器的定义并不完全相同,但是,针对form下的接受输入的元素,例如文本框什么的,则是完全统一的,都算作可以接受输入焦点的元素。
4,keypress事件会遵守冒泡规则,一直冒泡到document根元素,除非明确终止事件冒泡。
为了确认是哪些字符按键被按住,我们需要借助传入到事件处理器的event对象来确认,但是不同的浏览器对应的具体处理又有所不同,而好消息则是jQuery提供了统一的变量 - .which 你可以用该.which变量来得到被按下的键盘按键代码。
还有需要注意的是注意区分keydown()与keyup()方法,虽然两者都可以监听按键,但是前者返回的是按键的内部代码,而不是对应的字符编码,例如当按下a的时候,keydown()返回的数值是65,而keypress()则返回97,而针对大写的A则两种方法都返回65,因此当你监听特殊按键的时候,例如回车键,最好使用keydown()与keyup()方法。
现在回到刚开始的功能上,如何监听用户按下了回车键,并在按下回车键的时候,发送信息给服务器?
根据前面的知识梳理,这里比较适合用keydown()方法,但是也可以使用keypress()方法,我们先使用
keypress()方法实现下吧:
function handleKeyPress(){
$( "#cm_body" ).keypress(function() {
console.log( "HandleKeyPress for .keypress() called." );
if ( event.which == 13 ) {
console.log("return key downed!");
setSendTime();
event.preventDefault();
}
});
}
上面的代码逻辑非常简单,就是定义了一个方法handleKeyPress()然后,通过读取event.which变量
并验证是否为13,来获取用户是否进行了回车键的按键,如果按键了,就输出调试信息!
这里需要说明的是 setSendTimne()该方法是在线客服系统foxchat里的业务方法,是进行发送消息到
客服系统服务端的js方法,大家暂时可以忽视,以后的文章会进行讲解!
本文作者微信公众号
elearn007 欢迎关注交流!