如何在js中识别键盘某个键长按？

My_ideal2010 2012-01-06 02:40:20

如何在js中识别键盘某个键长按？
比如我一直按着上方向或下方向键，这样重复调用同一个函数，在线等。。。。求高手！！！

...全文

1236 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

chenjianhuacool 2012-01-06

打赏
举报

很简单的
。
。
。
。
。
。
。你只要使用keydown就可以了。其他的是不行的。只要把方法写在keydown里面，当你按住按键不放的时候，就会一直的触发这个事件。有用，请支持一下。谢谢
。
。
。
。
。
。
。
。
。
。
。
。
。

峭沙 2012-01-06

打赏
举报

<!doctype>

<html>

<head>

</head>

<body>

	<div id="debug"></div>

	<script>

		function test(key){

			debug.innerHTML += String.fromCharCode(key);

		};

		

		var date, debug = document.getElementById('debug');

		document.onkeypress = function(event){

			var key = event ? event.charCode : window.event.keyCode,

				_date = new Date().getTime();

			if(!date){

				date = _date;

			}else if(_date >= date + 500){

				test(key);

				date = _date;

			}

		}

		document.onkeyup = function(){

			date = 0;

		}

	</script>

</body>

</html>

--浮生若梦-- 2012-01-06

打赏
举报

[Quote=引用 4 楼 my_ideal 的回复:]
引用 3 楼 a87345293 的回复:

某个键长按应该不需要js来识别吧？
这个应该是键盘本身的属性吧？
就像在input输入框里你长按某个键，相应的字母就会重复出现
一样的道理
一直按着上方向或下方向键，这样重复调用同一个函数
这是不需要另外设置键的读取问题

彻底觉悟了，我事件绑错了，绑在了 keyup 上长按肯定没了效果，绑down上就oK了囧！
……
[/Quote]
方法分开吧，把需要连续执行的方法独立开来，在方法里用setTimeout自调用方法，在停止按键时停止setTimeout的方法

KeenWon 2012-01-06

打赏
举报

[Quote=引用楼主 my_ideal 的回复:]
如何在js中识别键盘某个键长按？
比如我一直按着上方向或下方向键，这样重复调用同一个函数，在线等。。。。求高手！！！
[/Quote]
你试试啊，长按一个键，会不停地在屏幕上打印这个键的值，同理也可以重复调用一个函数

My_ideal2010 2012-01-06

打赏
举报

[Quote=引用 3 楼 a87345293 的回复:]

某个键长按应该不需要js来识别吧？
这个应该是键盘本身的属性吧？
就像在input输入框里你长按某个键，相应的字母就会重复出现
一样的道理
一直按着上方向或下方向键，这样重复调用同一个函数
这是不需要另外设置键的读取问题
[/Quote]

彻底觉悟了，我事件绑错了，绑在了 keyup 上长按肯定没了效果，绑down上就oK了囧！
但是我这边必须要绑 keyup上因为要取值，更囧了！

明悟 2012-01-06

打赏
举报

某个键长按应该不需要js来识别吧？
这个应该是键盘本身的属性吧？
就像在input输入框里你长按某个键，相应的字母就会重复出现
一样的道理
一直按着上方向或下方向键，这样重复调用同一个函数
这是不需要另外设置键的读取问题

My_ideal2010 2012-01-06

打赏
举报

为搓哟哥哥你有看清楚问题吗老兄请抓住下关键字 “长”

KeenWon 2012-01-06

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD><TITLE>js 按键记录</TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="羽殇仁">

<META NAME="Keywords" CONTENT="js 按键记录">

<META NAME="Description" CONTENT="js 按键 记录">

</HEAD>

<BODY>

<script type="text/javascript">

    var keystring = ""; //记录按键的字符串

    function $(s) { return document.getElementById(s) ? document.getElementById(s) : s; }

    function keypress(e) {

        var currKey = 0, CapsLock = 0, e = e || event;

        currKey = e.keyCode || e.which || e.charCode;

        CapsLock = currKey >= 65 && currKey <= 90;

        switch (currKey) {

            //屏蔽了退格、制表、回车、空格、方向键、删除键 

            case 8: case 9: case 13: case 32: case 37: case 38: case 39: case 40: case 46: keyName = ""; break;

            default: keyName = String.fromCharCode(currKey); break;

        }

        keystring += keyName;

    }

    function keydown(e) {

        var e = e || event;

        var currKey = e.keyCode || e.which || e.charCode;

        if ((currKey > 7 && currKey < 14) || (currKey > 31 && currKey < 47)) {

            switch (currKey) {

                case 8: keyName = "[退格]"; break;

                case 9: keyName = "[制表]"; break;

                case 13: keyName = "[回车]"; break;

                case 32: keyName = "[空格]"; break;

                case 33: keyName = "[PageUp]"; break;

                case 34: keyName = "[PageDown]"; break;

                case 35: keyName = "[End]"; break;

                case 36: keyName = "[Home]"; break;

                case 37: keyName = "[方向键左]"; break;

                case 38: keyName = "[方向键上]"; break;

                case 39: keyName = "[方向键右]"; break;

                case 40: keyName = "[方向键下]"; break;

                case 46: keyName = "[删除]"; break;

                default: keyName = ""; break;

            }

            keystring += keyName;

        }

        $("content").innerHTML = keystring;

    }

    function keyup(e) {

        $("content").innerHTML = keystring;

    }

    document.onkeypress = keypress;

    document.onkeydown = keydown;

    document.onkeyup = keyup;

</script>

<input type="text" />

<input type="button" value="清空记录" onclick="$('content').innerHTML = '';keystring = '';"/>

<br/>请按下任意键查看键盘响应键值：<span id="content"></span>

</BODY>

</HTML>