Input method of Return and message send shortcut key to the conflict resolution _javascript tips

question: press ENTER when entering text in Chinese input method; The binding KeyUp event will enter the English text in the input method into the text box and trigger the Send button directly.

Keyboard events:

When a button is pressed or released, three keyboard events may be triggered in each browser

KeyDown
KeyPress
KeyUp

The KeyDown event occurs when the key is pressed, then triggers the KeyPress, and the KeyUp event is triggered when the button is released.

Chinese Input Method:

Firfox: Input trigger KeyDown, carriage return confirmation input trigger KeyUp
Chrome: Input triggers KeyDown, KeyUp, carriage return confirmation input triggers only KeyDown
IE: Input triggers KeyDown, KeyUp, carriage return confirmation input trigger Keydown,keyup
Safari: Input triggers KeyDown, KeyUp, carriage return confirmation input trigger Keydown,keyup
Opera: input triggers KeyDown, KeyUp, carriage return confirmation input trigger Keydown,keyup
In input, textarea, Chinese input method: No triggering KeyPress event

KeyPress event: Poor support for Chinese input method, unable to respond to Chinese input; Unable to respond to system function keys

HTML code:

<textarea name= "" id= "text" cols= "rows=" 5 "></textarea> <script type=" 
  text/javascript "> 
    var text = document.getElementById (' text '); 
    Text.onkeydown = function (e) { 
      console.log (' KeyDown '); 
      if (E.keycode =) { 
        console.log (' KeyDown enter send '); 
      } 
      Console.log (' value ', text.value); 
    } 
    text.onkeypress = function (e) { 
      console.log (' keypress '); 
      Console.log (' value ', text.value); 
    } 
    Text.onkeyup = function (e) { 
      console.log (' KeyUp '); 
      if (E.keycode =) { 
        console.log (' KeyUp enter send '); 
      } 
      Console.log (' value ', text.value); 
    } 
  </script>

English Input Method:

The above figure can be concluded:

KeyDown, keypress occurs when the text is not typed into the input box, if the text in the KeyDown, KeyPress event output text box, get the text box before triggering the keyboard event;

When the KeyUp event is triggered, the entire keyboard event input text is completed, resulting in the text content that triggers the keyboard event.

Chinese Input method: " no KeyPress event "

Press the ENTER key to confirm:

The Chinese Input method presses the ENTER key when the input is indeterminate, KeyDown and KeyUp effect is different, KeyDown does not trigger the preset carriage return method event

Answer:

Most input methods are in the KeyDown to complete the input process, so if the carriage return submission is in the KeyUp event will appear after the end of the word directly trigger the Enter to submit, resulting in conflict problems.

Method: Carriage return submission event to KeyDown, this time when the KeyDown event occurs in the input method, and will not occur in the submission box sent events, and thus resolve the conflict.

Some tips:

KeyDown triggered, not necessarily trigger KeyUp, when KeyDown pressed, drag the mouse, then will not trigger the KeyUp event.

KeyPress is used primarily to capture numbers ( Note: Symbols that include shift+ numbers ), letters ( Note: include case ), keypad, and so on except f1-12, SHIFT, Alt, Ctrl, Insert, home, ANSI characters PgUp, Delete, End, PgDn, ScrollLock, Pause, NumLock, {Menu key}, {Start key}, and directional keys

KeyDown and KeyUp can usually capture the keyboard except PRSCRN all keys

KeyPress can only capture a single character

KeyDown and KeyUp can capture key combinations.

KeyPress can capture the case of a single character

KeyDown and KeyUp for a single character capture keyvalue are a value, that is, can not determine the case of a single character.

KeyPress does not distinguish between numeric characters of the keypad and the main keyboard.

KeyDown and KeyUp distinguish the numeric characters of the keypad and the main keyboard.

None of the Prscrn buttons KeyPress, KeyDown, and KeyUp can be captured.

When you use the keyboard, you will typically use a key combination function similar to Ctrl+shift+alt.

The above input method of carriage return and message send shortcut key to the conflict resolution is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.