Detailed explanation of the use of jQuery.keypress() function

The

keypress() function is used to bind a handler function to the keypress event of each matching element. In addition, you can also pass some additional data to the event handling function.

The keypress event is triggered when a keyboard key is pressed. It is similar to the keydown event, but keypress focuses on which character is pressed when the key is pressed (only keys that can print characters will trigger keypress), while keydown focuses on which key is pressed (pressing any key can trigger keydown ). For modifier and non-printing keys such as Ctrl, Alt, Shift, Delete, Esc, etc., listen to the keydown event.

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the keypress event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via keypress(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.keypress( [[ data ,]  handler ] )

Parameters

jQuery 1.4.3 New support: keypress() supports data parameters.

This in the parameter handler points to the current DOM element. keypress() will also pass in a parameter to the handler: the Event object representing the current event.

Return value

keypress()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following HTML sample code:

<input id="chars" type="text" />

Now, we bind the handler function for the keypress event of the window object (you can Bind multiple times and execute them in sequence according to the binding order when triggered):

keypress事件的event.which属性返回的是按键所输入的字符的Unicode值。keydown事件的event.which属性返回的是所按下的键盘按键的映射代码值。

// 检测按键输入的字符
// Ctrl、Alt等非打印键不会触发keypress事件
$(window).keypress( function(event){
    $("body").append( "<br>你输入了字符[" + String.fromCharCode( event.which ) + "](event.which=" + event.which + &#39;)&#39; ) ;
} );

// 触发keypress事件
// $(window).keypress( );

我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：

// { A:65, Z:90, a:97, z:122 }
var validChars = { "A": "A".charCodeAt(0), "Z": "Z".charCodeAt(0), "a": "a".charCodeAt(0), "z": "z".charCodeAt(0)  };

// 只允许输入大小写字母，不允许输入其他字符(使用某些输入法可能会绕过该限制，从而输入中文或其它字符)
$("#chars").keypress( validChars, function(event){
    var ch = event.data;
    return event.which >= ch.A && event.which <= ch.Z || event.which >= ch.a && event.which <= ch.z;
} );

The above is the detailed content of Detailed explanation of the use of jQuery.keypress() function. For more information, please follow other related articles on the PHP Chinese website!