blocks|key|740257|text|如果键盘上存在物理上不同的键，则浏览器应用程序应该与桌面应用程序一样能够区分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740258|对于最新版本的Chrome+(39.0.2171.95+m)、Firefox+(32.0.3)、IE+(11.0.9600.17501)和Opera+(12.17)，键盘事件对象现在具有location属性。我假设这个属性已经存在了一段时间了，尽管它的文档很少。|740259|onkeydown测试显示，当按下“正常”enter键时，keyCode=13和location=0；当按下数字键盘enter时，keyCode=13和location=3。|740260|因此，下面的代码可以用来在回车时设置key==13，在数字键盘回车时设置key==176：|740261|window.onkeydown=function(ev)
{
++++var+e=+ev+%7C%7C+window.event,
++++++key+=+e.keyCode+%7C%7C+e.which;

++++if+((key==13)+&&
++++++++(e.location===3))
++++++key=176;+//+176+is+the+scancode+for+the+numpad+enter
++++//+continued....
}|code-block|syntax|javascript|740262|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If there is a key on the keyboard that is physically different, browser applications should be just as capable as desktop applications to differentiate. 

With the latest versions of Chrome (39.0.2171.95 m), Firefox (32.0.3), IE (11.0.9600.17501) and Opera (12.17), the keyboard event object now has the location property. I would presume this property has been around for a while, although it is lightly documented.

Tests of onkeydown reveal that when the "normal" enter key is pressed, keyCode=13 and location=0; when the numpad enter is pressed, keyCode=13 and location=3.

So the following code can be used to set key==13 if the enter, key==176 if numpad enter:

<pre><code>window.onkeydown=function(ev)
{
 var e= ev || window.event,
 key = e.keyCode || e.which;

 if ((key==13) &amp;&amp;
 (e.location===3))
 key=176; // 176 is the scancode for the numpad enter
 // continued....
}
</code></pre>

blocks|key|740335|text|我提供一个更新，因为这个问题仍然出现在谷歌搜索结果的顶部附近。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740336|根据MDN，KeyboardEvent.keyCode和KeyBoardEvent.charCode已被弃用，不应再使用。|offset|length|style|CODE|740337|根据需要，可以通过访问KeyboardEvent.key、KeyboardEvent.code和KeyboardEvent.location属性来确定KeyboardEvent密钥。|740338|KeyboardEvent.key通常返回您在文本编辑器中看到的输出键和非输出键上的名称(包括区分大小写)。|740339|KeyboardEvent.code返回密钥的字符串描述。|740340|KeyboardEvent.location返回一个介于0和3之间的整数，表示键所在的键盘区域(分别为标准、左、右和数字板)。|740341|这些属性之间的Understanding+the+difference可以帮助确定哪种属性最适合您给定的情况。在这个问题中:对于‘回车’和‘数字键盘回车’键，event.key将返回相同的输出("Enter")，而event.code将分别返回"Enter"和"NumpadEnter"。|740342|在这种情况下，如果您想区分数字键盘和键盘键，可以使用event.code。如果您希望它们的操作相同，event.key将是更好的选择。|740343|如果想要区分其他键，比如左右Ctrl键，还需要查看event.location属性。|740344|我正在添加一个小键盘事件游乐场，以查看这些事件属性之间的差异。感谢MDN提供的the+concept，我只在下面稍微修改了一下：|740345|​|740346|window.addEventListener("keydown",+function(event)+{

++let+str+=+"key+=+'"+%2B+event.key+%2B+
++++++++++++++"'+&nbsp+code+=+'"+%2B+event.code+%2B+"'"+%2B+
++++++++++++++"'+&nbsp+location+=+'"+%2B+event.location+%2B+"'"+;
++++++++++++++
++let+el+=+document.createElement("span");
++
++el.innerHTML+=+str+%2B+" ";
+
++document.getElementById("output").appendChild(el);
++
},+true);|code-block|syntax|javascript|740347|#output+{
++font-family:+Arial,+Helvetica,+sans-serif;
++overflow-y:+auto;
++margin-left:+4em
}

#output+span+{
++line-height:+2em;
}

#output+:nth-child(2n)+{
++color:+blue;
}|740348|


++Press+keys+on+the+keyboard+to+see+what+the+KeyboardEvent's+key+and+code+values+are+for++each+one.

<div+id="output"></div>|740349|740350|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode|1|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode|2|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key|3|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code|4|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location|5|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent|6|7|https://jsfiddle.net/api/mdn/^0|0|6|L|S|M|6|L|0|S|M|1|0|B|H|T|I|1C|M|23|D|B|H|2|T|I|3|1C|M|4|0|0|H|0|0|I|0|0|M|0|27|9|2P|7|2Z|A|3E|7|3M|D|7|S|5|0|Q|A|1E|9|0|E|4|P|E|0|X|3|6|13|B|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1V|8|@$D|1W|E|1X|F|G]|$D|1Y|E|1Z|F|G]]|9|@$D|20|E|21|1|22]|$D|23|E|24|1|25]]|A|$]]|$1|H|3|I|5|6|7|26|8|@$D|27|E|28|F|G]|$D|29|E|2A|F|G]|$D|2B|E|2C|F|G]|$D|2D|E|2E|F|G]]|9|@$D|2F|E|2G|1|2H]|$D|2I|E|2J|1|2K]|$D|2L|E|2M|1|2N]]|A|$]]|$1|J|3|K|5|6|7|2O|8|@$D|2P|E|2Q|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|2R|8|@$D|2S|E|2T|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|2U|8|@$D|2V|E|2W|F|G]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|2X|8|@$D|2Y|E|2Z|F|G]|$D|30|E|31|F|G]|$D|32|E|33|F|G]|$D|34|E|35|F|G]|$D|36|E|37|F|G]]|9|@$D|38|E|39|1|3A]]|A|$]]|$1|R|3|S|5|6|7|3B|8|@$D|3C|E|3D|F|G]|$D|3E|E|3F|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|3G|8|@$D|3H|E|3I|F|G]|$D|3J|E|3K|F|G]]|9|@]|A|$]]|$1|V|3|W|5|6|7|3L|8|@]|9|@$D|3M|E|3N|1|3O]|$D|3P|E|3Q|1|3R]]|A|$]]|$1|X|3|Y|5|6|7|3S|8|@]|9|@]|A|$]]|$1|Z|3|10|5|11|7|3T|8|@]|9|@]|A|$12|13]]|$1|14|3|15|5|11|7|3U|8|@]|9|@]|A|$12|13]]|$1|16|3|17|5|11|7|3V|8|@]|9|@]|A|$12|13]]|$1|18|3|Y|5|6|7|3W|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|3X|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]|1H|$5|1C|1D|1E|A|$1F|1I]]|1J|$5|1C|1D|1E|A|$1F|1K]]|1L|$5|1C|1D|1E|A|$1F|1M]]|1N|$5|1C|1D|1E|A|$1F|1O]]|1P|$5|1C|1D|1E|A|$1F|1Q]]|1R|$5|1C|1D|1E|A|$1F|1M]]|1S|$5|1C|1D|1E|A|$1F|1T]]]]

I am providing an update as this question still appears near the top of google search results.

Per MDN, <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode" rel="nofollow noreferrer"><code>KeyboardEvent.keyCode</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode" rel="nofollow noreferrer"><code>KeyBoardEvent.charCode</code></a> are deprecated and should no longer be used.

<code>KeyboardEvent</code> keys can be determined by accessing the <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" rel="nofollow noreferrer"><code>KeyboardEvent.key</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" rel="nofollow noreferrer"><code>KeyboardEvent.code</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location" rel="nofollow noreferrer"><code>KeyboardEvent.location</code></a> properties as necessary.

<code>KeyboardEvent.key</code> returns generally what you see in a text editor for output keys and the name on non-output keys (including being case-sensitive).

<code>KeyboardEvent.code</code> returns a string description of the key.

<code>KeyboardEvent.location</code> returns an integer between 0 and 3 to signify the area of the keyboard the key is located in (standard, left, right, and numpad respectively).

<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent" rel="nofollow noreferrer">Understanding the difference</a> between these properties can help to determine which will be most appropriate for your given situation. In the case of this question: <code>event.key</code> will return the same output (<code>"Enter"</code>) for both the 'carriage return' and 'numpad enter'keys, while <code>event.code</code> will return <code>"Enter"</code> and <code>"NumpadEnter"</code> respectively.

In this case, if you wanted to differentiate between numpad and keyboard keys, you could use <code>event.code</code>. If you wanted their operation to be the same, <code>event.key</code> would be a better choice.

If you wanted to differentiate between other keys, such as the left and right <code>Ctrl</code> keys, you would also want to look at the <code>event.location</code> property.

I'm adding a small keyboard event playground to see the difference between these event properties. Credit to <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" rel="nofollow noreferrer">MDN</a> for providing <a href="https://jsfiddle.net/api/mdn/" rel="nofollow noreferrer">the concept</a> that I only slightly modified below:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener("keydown", function(event) {

 let str = "key = '" + event.key + 
 "' &amp;nbsp code = '" + event.code + "'" + 
 "' &amp;nbsp location = '" + event.location + "'" ;
 
 let el = document.createElement("span");
 
 el.innerHTML = str + "&lt;br/&gt;";
 
 document.getElementById("output").appendChild(el);
 
}, true);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#output {
 font-family: Arial, Helvetica, sans-serif;
 overflow-y: auto;
 margin-left: 4em
}

#output span {
 line-height: 2em;
}

#output :nth-child(2n) {
 color: blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code --&gt;

&lt;p&gt;
 Press keys on the keyboard to see what the KeyboardEvent's key and code values are for each one.
&lt;/p&gt;
&lt;div id="output"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|740389|text|您可以通过事件的code属性来区分这两者。对于numpad，它返回NumpadEnter，对于另一个，它返回Enter。另外，与code属性不同，您也可以使用在所有情况下都有效的location属性。对于numpad+Enter，它返回3，而对于other+Enter，它返回0。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|740390|entityMap^0|8|4|X|B|1I|5|1S|4|2H|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

You can differentiate both by <code>code</code> property of the event. For the numpad one, it returns <code>NumpadEnter</code> and for the other one it returns <code>Enter</code>. Alternatively, you can also use <code>location</code> property which works in all cases, unlike <code>code</code> property. For numpad Enter, it returns 3 whereas, for other Enter it returns 0.

Some desktop apps treat the 'carriage return' key and the numpad's 'enter' key differently. I've noticed that these two keys generate the same keyCode (13) in Javascript (jQuery).

Are they converted to be equal in the browser environment, or is it possible to differentiate between them (ie. make the CR make a new line in a text area, and the 'enter' key submit it's form ?

How to differentiate between 'Enter' and 'Return' keys in Javascript?

一些桌面应用对“回车”键和数字键盘的“回车”键有不同的处理方式。我注意到这两个键在Javascript (jQuery)中生成相同的keyCode (13)。它们在浏览器环境中是否转换为相等，或者是否可以区分它们(即，让CR在文本区域中创建一行，然后按“enter”键提交其表单？

问如何在Javascript中区分“Enter”和“Return”键？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Javascript中区分“Enter”和“Return”键？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Javascript中区分“Enter”和“Return”键？
EN