# .keypress()

所属分类：事件 > 键盘事件 英文文档：.keypress()

## .keypress( handler(eventObject) )返回: jQuery

描述: 为 "keypress" 事件绑定一个处理函数，或者触发元素上的 "keypress" 事件。

- #### 添加的版本: 1.0.keypress( handler(eventObject) )

  - handler(eventObject)
    类型: Function()
    每次事件触发时会执行的函数。

- #### 添加的版本: 1.4.3.keypress( [eventData ], handler(eventObject) )

  - eventData
    类型: PlainObject
    一个对象，它包含的数据键值对映射将被传递给事件处理程序。
  - handler(eventObject)
    类型: Function()
    每次事件触发时会执行的函数。

- #### 添加的版本: 1.0.keypress()

  - 这个方法不接受任何参数。

注意:：由于`keypress`事件没有统一的官方规范说明，所以在不同的浏览器，不同的浏览器版本，和不同的平台实际使用这个事件时可能遇到的问题。

这个方法的前两个用法是 `.bind('keypress', handler)` 的快捷方式，第3个不带参数的用法是 `.trigger('keypress')` 的快捷方式。

当浏览器捕获一个元素上键盘输入时，`keypress`就会发送个元素。这是类似`keydown`事件，除了当按键被一直按下（即连续插入字符的场合）时的处理。如果用户按下并按住这个键（不松开释放）的时候，`keydown`事件只触发一次，但是`keypress`会在每个字符插入的时候都会触发事件。此外，组合键（如Shift）会触发`keydown`事件，但不会触发`keypress`事件。

`keypress`事件处理程序可以附加到任何元素，但该事件只是发送到具有焦点的元素上。不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

举个例子，看下面的代码

1 2 3 4 5 6 7 8 |
    <form>  <fieldset>    <input id="target" type="text" value="Hello there" />  </fieldset></form><div id="other">  Trigger the handler</div>

事件处理函数可以绑定在输入框上：

1 2 3 |
    $("#target").keypress(function() {  alert("Handler for .keypress() called.");});

现在当光标插入点位于表单域并一个键被按下，警告将被显示：

Handler for .keypress() called.

如果该键被按下，消息重复。应用不带参数的`.keydown()`，我们可以手动触发这个事件:

1 2 3 |
    $('#other').click(function() {  $("#target").keypress();});

这些代码执行后，点击Trigger the handler同样警报显示。

如果需要任何按键被捕获（例如，要实现网页全局上的快捷键），那么把这个事件附加到`document`对象上是非常有用的。所有的按键事件都会沿着各自的 DOM 树冒泡到 `document` 对象上，除非明确停止。

要确定哪个键被按下，我们可以检测传递给处理函数的event 对象。而浏览器使用不同的属性来存储这些信息，jQuery的规范了`.which`属性，以便我们能够可靠地使用它来检索关键代码。

值得注意的是`keydown` 和 `keyup`提供一个代码，表示哪一个键被按下，而`keypress`表示被输入哪个字符。例如，按下了小写的 "a"，在 `keydown`和`keyup` 中，对应该键的代码是 65，但是对于 `keypress` 而言，接收到的代码是 97。如果是大写 "A" 的话，则所有的相关事件接收到的代码都是 65。由于这个区别，若想捕获敲击了哪个特殊键的话，例如，方向键，使用 `.keydown()`或`.keyup()` 更好。

## 例子:

#### 在文本框中按下某个键时，显示 event 对象。注意：输出 event 对象时，要依赖一个简单的 $.print() 插件 (http://api.jquery.com/scripts/events.js)。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
    <!DOCTYPE html><html><head>  <style>fieldset { margin-bottom: 1em; }input { display: block; margin-bottom: .25em; }#print-output {  width: 100%;}.print-output-line {  white-space: pre;  padding: 5px;  font-family: monaco, monospace;  font-size: .7em;} </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <form>  <fieldset>    <label for="target">Type Something:</label>    <input id="target" type="text" />  </fieldset></form><button id="other">  Trigger the handler</button><script src="http://api.jquery.com/resources/events.js"></script> <script>var xTriggered = 0;$("#target").keypress(function(event) {  if ( event.which == 13 ) {     event.preventDefault();   }   xTriggered++;   var msg = "Handler for .keypress() called " + xTriggered + " time(s).";  $.print( msg, "html" );  $.print( event );}); $("#other").click(function() {  $("#target").keypress();});</script> </body></html>

#### Demo: