Compatible with IE and Firefox's carriage return event (js and jquery)_javascript skills

Javascript is compatible with the carriage return event of IE and Firefox

Copy code The code is as follows:

Copy code The code is as follows:

<script> <br>document.onkeydown=function(event) <br>{ <br>e = event ? event :(window.event ? window.event : null); <br>if(e.keyCode==13){ <br>//Execution method <br>alert('Enter is detected '); <br>} <br>} <br></script>

jquery is compatible with the carriage return event of IE and Firefox

Copy code The code is as follows:

$(document).ready(function(){
$ ("Control for pressing Enter").keydown(function(e){
var curKey = e.which;
if(curKey == 13){
$("#Enter event button Control").click();
return false;
}
});
});

jquery multi-browser capture enter event Code

Copy code The code is as follows:

$(document).keydown(function (event) {
if (event.keyCode == 13) {
$('form').each(function() {
//Your code to run
});
}
});

Button default enter event (Enter event) based on jquery
Here I will introduce the button button The default carriage return (enter) event. If you can use submit, you don’t need to look at the following code, because submit can directly default to the carriage return event (enter)
I hereby declare that the code is completed through jquery. I wrote the actual column code myself, and it is completely achievable. Just copy it and you can use it, but you must import the jquery package. There is a way to support IE and Firefox, it will definitely work. When I was working on it, I found some codes online, and basically none of them supported Firefox. Okay, enough nonsense has been said. Start the code demonstration. Everyone is welcome to correct errors and provide technical advice, thank you.

Copy code The code is as follows:

3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">

This problem has been solved. If there is a better solution, I hope to share it.

Today I made a function to submit the form login with the Enter key. My code is as follows:

Copy code Code As follows:

I got an error when executing in Firefox: missing ( before formal parameters

According to the Internet It is suggested that I change my source code again:

Copy the code The code is as follows:

I got another event is not defined error.

After searching hard, I found it (the original text is as follows):
Mainly divided into four parts
Part 1: Browser key events
Part 2: Compatible browsers
Part Three: Code Implementation and Optimization
Part Four: Summary

Part One: Browser Key Events

Using js to implement keylogging, you should pay attention to three types of browsers Key event types, namely keydown, keypress and keyup, which correspond to the three event handles onkeydown, onkeypress and onkeyup respectively. A typical keypress will generate all three events, in order keydown, keypress, and then keyup when the key is released.

Among these three event types, keydown and keyup are relatively low-level, while keypress is relatively advanced. The so-called advanced here means that when the user presses shift 1, keypress parses the key event and returns a printable "!" character, while keydown and keyup only record the shift 1 event. [1]

But keypress is only effective for some characters that can be printed, but for function keys, such as F1-F12, Backspace, Enter, Escape, PageUP, PageDown and arrow directions, etc., it will not be generated. keypress event, but can generate keydown and keyup events. However, in FireFox, function keys can generate keypress events.

The event objects passed to keydown, keypress and keyup event handlers have some common properties. If Alt, Ctrl, or Shift are pressed together with a key, this is represented by the event's altKey, ctrlKey, and shiftKey properties, which are common to FireFox and IE.

Part 2: Compatible browsers

Any js that involves browsers must consider browser compatibility issues.
Currently commonly used browsers are mainly based on IE and Mozilla. Maxthon is based on the IE kernel, while FireFox and Opera are based on the Mozilla kernel.

2.1 Initialization of the event

The first thing you need to know is how to initialize the event. The basic statement is as follows:

function keyDown(){}
document.onkeydown = keyDown ;

When the browser reads this statement, no matter which key on the keyboard is pressed, the KeyDown() function will be called.

2.2 Implementation methods of FireFox and Opera

The implementation of programs such as FireFox and Opera is more troublesome than IE, so I will describe them here first.

The keyDown() function has a hidden variable - normally, we use the letter "e" to represent this variable.

function keyDown(e)

The variable e represents a keystroke event. To find which key was pressed, use the which attribute:

e.which

e.which will give the index value of the key. The method of converting the index value into the alphanumeric value of the key requires the use of the static function String.fromCharCode(), as follows:

String .fromCharCode(e.which)

Putting the above statements together, we can get which key was pressed in FireFox:

Copy code The code is as follows:

function keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode( e.which);
alert("keycode: " keycode " character: " realkey);
}
document.onkeydown = keyDown;

2.3 IE implementation method

The IE program does not require the e variable. Use window.event.keyCode instead of e.which. The method of converting the key index value into the real key value is similar: String.fromCharCode(event.keyCode). The program is as follows :

Copy code The code is as follows:

function keyDown() {
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert("Keycode: " keycode " character: " realkey);
}
document.onkeydown = keyDown;

2.4 Determining the browser type

We have learned above how to obtain key event objects in various browsers. Then we need to determine the browser type. There are many methods. , some are easier to understand, and there are also very clever methods. Let’s talk about the general method first: it is to use the appName attribute of the navigator object. Of course, you can also use the userAgent attribute. Here, appName is used to determine the browser type. The appName of IE and Maxthon is "Microsoft Internet Explorer", and the appName of FireFox and Opera is "Netscape", so a code with a relatively simple function is as follows:

Copy code The code is as follows:

function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String. fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
alert( "Keycode: " keycode " Character: " realkey);
}
document.onkeyup = keyUp;

The simpler method is [2]:

Copy code The code is as follows:

function keyUp(e) {
var currKey=0,e=e| |event;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("Key code: " currKey " character: " keyName);
}
document.onkeyup = keyUp;

The above method is more clever. Let’s explain it briefly:
First, e=e||event; this This code is for compatibility with browser event object acquisition. The meaning of this code in js is that if the hidden variable e exists in FireFox or Opera, then e||event returns e. If the hidden variable e does not exist in IE, then event is returned.
Secondly, currKey=e.keyCode||e.which||e.charCode; This sentence is to be compatible with the key code attribute of the browser key event object (see Part 3 for details). For example, in IE, there is only the keyCode attribute , while FireFox has which and charCode attributes, Opera has keyCode and which attributes, etc.

The above code is only compatible with the browser, obtains the keyup event object, and simply pops up the key code and key characters. However, a problem arises. When you press a key, the character keys are all in uppercase, and when you press When pressing the shift key, the characters displayed are very strange, so the code needs to be optimized.

Part 3: Code Implementation and Optimization

3.1 The key code and character code of key events

The key code and character code of key events lack portability between browsers For different browsers and different case events, the storage methods of key codes and character codes are different. The key event, browser and key event object attribute relationships are as follows:

As shown in the table :

In IE, there is only one keyCode attribute, and its interpretation depends on the event type. For keydown, keyCode stores the key code, and for keypress events, keyCode stores a character code. There are no which and charCode attributes in IE, so the which and charCode attributes are always undefined.

The keyCode in FireFox is always 0. When the time is keydown/keyup, charCode=0, which is the key code. When the event keypress occurs, the values ​​of which and charCode are the same, and the character code is stored.

In Opera, the values ​​of keyCode and which are always the same. In the keydown/keyup event, they store the key code. In the keypress time, they store the character code, and charCode is not defined and is always undefined. .

3.2 Keydown/keyup or keypress

The first part has introduced the difference between keydown/keyup and keypress. There is a more general rule. The keydown event is most useful for function keys. , and the keypress event is most useful for printable keys [3].

Keyboard logging is mainly for printable characters and some function keys, so keypress is the first choice. However, as mentioned in the first part, keypress in IE does not support function keys, so keydown/keyup events should be used. Replenish.

3.3 Code Implementation
The general idea is to use the keypress event object to obtain key characters, and use the keydown event to obtain function characters, such as Enter, Backspace, etc.

The code implementation is as follows

Copy the code The code is as follows:

Please press any key to see the keyboard response Key value:

Code analysis:
$ (): Get dom based on ID
keypress(e): Implement the interception of character codes. Since the function keys need to be obtained using keydown, these function keys are blocked in keypress.
keydown(e): Mainly realizes the acquisition of function keys.
keyup(e): Display the intercepted string.

The code is basically completed! Haha

Part 4: Summary

The original purpose of writing the code is to be able to record keystrokes through js and return a string.

The above code only uses js to implement basic English keystroke recording. It is powerless for Chinese characters. The only way I can think of to record Chinese characters is, of course, to use js, which is to use keydown and keyup to record underlying keystroke events and Chinese character analysis. Of course nothing can be done. Of course, you can directly obtain the Chinese characters in the input using DOM, but this has departed from the original intention of using key events to achieve key recording discussed in this article.

The above code can also implement the function of adding a clipboard, monitoring deletion, etc...

According to its guidance, I modified my code to:

Copy code The code is as follows:

Success!