JavaScript监听textarea中按键

本文探讨了不同浏览器中事件监听机制的差异,特别是onKeyPress事件在IE与Firefox中的表现不一致问题,并提供了一种使用JQuery统一处理的方法。

    不同的浏览器中的事件监听机制是不同的,以onKeyPress事件为例。

有个textarea,

<textarea id="text"></textarea>

    经常会定义onKeyPress="keypress();",并定义以下方法。

var keypress = function(){
    var k = window.event.keyCode;
}

    实际上这类代码在firefox下无效。

那么修改为如下方式:

    onKeyPress="keypress(event);"

var keypress = function(event){
    var k = event.keyCode;
}

    还是有问题,按下k后,在IE中取值为107,FF下取值则为0。

    将keyCode改为charCode试试。

var k = event.charCode;

    IE下取值为undefined,FF下取值为107了

    或许可以做判断

if(是IE)
    var k = event.keyCode;
else if(是FF)
    var k = event.charCode;

 

    不过,如果有组合键的话,这种方法也不行了。

    当按下Ctrl+k时,

    在IE中,keyCode为11,charCode为undefined

    在FF中,keyCode为0,charCode为107

 

    这里我使用的办法是JQuery。

    $("#text").bind("keyPress",function(event){
         var k = event.which;
    });

     这里使用的which就不论在IE下还是FF中,是单一按键还是组合键了,其值都是是107

    然后使用String.fromCharCode(k),就可以取出按下的值了。

JavaScript 中,有多种方法可以监听 `textarea` 元素内容的变化,以下是几种常见的方法: ### 使用 `input` 事件 `input` 事件在元素的值发生变化时触发,只要用户输入或删除内容,该事件就会立即触发。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <textarea id="myTextarea"></textarea> <script> const textarea = document.getElementById('myTextarea'); textarea.addEventListener('input', function () { console.log('内容已改变:', textarea.value); }); </script> </body> </html> ``` ### 使用 `change` 事件 `change` 事件在元素失去焦点且其值已改变时触发。与 `input` 事件不同,它不会在每次输入时触发,而是在用户完成输入并移动焦点后触发。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <textarea id="myTextarea"></textarea> <script> const textarea = document.getElementById('myTextarea'); textarea.addEventListener('change', function () { console.log('内容已改变:', textarea.value); }); </script> </body> </html> ``` ### 使用 `keyup` 事件 `keyup` 事件在盘上的按键被释放时触发。当用户按下并释放一个时,该事件会被触发,可用于监听用户的盘输入。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <textarea id="myTextarea"></textarea> <script> const textarea = document.getElementById('myTextarea'); textarea.addEventListener('keyup', function () { console.log('内容已改变:', textarea.value); }); </script> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值