Javascript onkeyup this value

Element: keyup event

The keyup event is fired when a key is released.

The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase «a» will be reported as 65 by keydown and keyup , but as 97 by keypress . An uppercase «A» is reported as 65 by all events.

Keyboard events are only generated by , , and anything with the contentEditable or tabindex attribute.

Since Firefox 65, the keyup and keydown events are now fired during IME composition, to improve cross-browser compatibility for CJKT users (Firefox bug 354358. To ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keyCode relating to an event that has been processed by an input-method editor (IME)):

.addEventListener("keyup", (event) =>  if (event.isComposing || event.keyCode === 229)  return; > // do something >); 

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("keyup", (event) => >); onkeyup = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parents, UIEvent and Event . KeyboardEvent.altKey Read only Returns a boolean value that is true if the Alt ( Option or ⌥ on macOS) key was active when the key event was generated. KeyboardEvent.code Read only Returns a string with the code value of the physical key represented by the event.

Warning: This ignores the user’s keyboard layout, so that if the user presses the key at the «Y» position in a QWERTY keyboard layout (near the middle of the row above the home row), this will always return «KeyY», even if the user has a QWERTZ keyboard (which would mean the user expects a «Z» and all the other properties would indicate a «Z») or a Dvorak keyboard layout (where the user would expect an «F»). If you want to display the correct keystrokes to the user, you can use Keyboard.getLayoutMap() .

KeyboardEvent.ctrlKey Read only Returns a boolean value that is true if the Ctrl key was active when the key event was generated. KeyboardEvent.isComposing Read only Returns a boolean value that is true if the event is fired between after compositionstart and before compositionend . KeyboardEvent.key Read only Returns a string representing the key value of the key represented by the event. KeyboardEvent.locale Read only Returns a string representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn’t know the keyboard’s locale.

Note: This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.

KeyboardEvent.location Read only Returns a number representing the location of the key on the keyboard or other input device. A list of the constants identifying the locations is shown in Keyboard locations. KeyboardEvent.metaKey Read only Returns a boolean value that is true if the Meta key (on Mac keyboards, the ⌘ Command key; on Windows keyboards, the Windows key ( ⊞ )) was active when the key event was generated. KeyboardEvent.repeat Read only Returns a boolean value that is true if the key is being held down such that it is automatically repeating. KeyboardEvent.shiftKey Read only Returns a boolean value that is true if the Shift key was active when the key event was generated.

Examples

addEventListener keyup example

input placeholder="Click here, then press and release a key." size="40" /> p id="log">p> 

const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("keyup", logKey); function logKey(e)  log.textContent += ` $e.code>`; > 

onkeyup equivalent

Источник

onkeyup Event

The onkeyup event occurs when the user releases a key on the keyboard.

Keyboard Events

See Also:

Warning

The onkeypress event is deprecated.

It is not fired for all keys (like ALT, CTRL, SHIFT, ESC) in all browsers.

To detect if the user presses a key, always use the onkeydown event. It works for all keys.

Syntax

In JavaScript, using the addEventListener() method:

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	KeyboardEvent
HTML tags:	All HTML elements, EXCEPT: , , , , , , , , , , and
DOM Version:	Level 2 Events

More Examples

Example

Using «onkeydown» together with the «onkeyup» event:

Example

Output the actual key that was released inside a text field:

Browser Support

onkeyup is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

JavaScript onkeyup

JavaScript onkeyup event is a type of event that occurs when the user handling the application releases one key on the keyboard. Using this method allows one to handle the events in the derived classes. Method for this event helps the application handle the occurring event without attaching the delegates. Unlike the onkeyup event, this method works regardless of the specific key being pressed, whether it is a letter, number, or any other key.

Web development, programming languages, Software testing & others

Syntax of JavaScript onkeyup

In JavaScript, if one needs an event in one’s application, there are 2 ways for that; one is by calling onkeyup method on the object and calling the method that contains the operations needed to be performed. And second is using an addEventListener method to call the function to perform the operations. Thus for calling onkeyup event method, there are 2 syntaxes.

1. Calling the function on the objects using onkeyup keyword.

document.getElementById("text_box").onkeyup = function() ;

2. Using the function in addEventListener() method on the object.

element.addEventListener(event, function, useCapture);

document.getElementById("text_box").addEventListener("keyup", myFunction);

How onkeyup Event work in JavaScript?

When the keyup event in JavaScript is triggered, the application sends a code to the compiler indicating that a key was pressed. For example, the keyup event reports a lowercase “x” as 65, yet an uppercase “A” is constantly reported as 65 throughout all events. Once the compiler gets the code, it sends the control to the function defined and runs all the statements in the function on each key pressed. This method is typically used to do actions such as determining whether the pushed key is an alphabet or a number, or transforming the entered letters to uppercase after they are typed into the field.

For raising such an event in one case, use onkeyup method on the elements and use it to call the method that needs to be called.

There is a second way to call a method on an event. It is using event Listener. In JavaScript, one can use addEvenetListener() method to call a method when an event occurs. This method helps to attach event listener to an object without overwriting existing event listeners. Thus using addEventListener() method makes it easier to handle various events occurring in the application. This also enhances the readability of the code.

element.addEventListener(event, function, useCapture);

In such a way method attaches the function to an event keyup or keypress etc.

There is a distinction between the onkeypress and onkeyup events. Also, onkeypress sees the keys having letters or digits, whereas onkeyup handles all the keys on the keyboard.

Examples of JavaScript onkeyup

Given below are the examples mentioned:

Example #1

In our first example, we will see JavaScript code append 1 to each letter being pressed in the input field. Here we are using onkeyup method to call the event handler by calling myMethod and executing the statements in the method.

  
This method will append 1 at the end of each key pressed in the text field
 Enter your Text:  document.getElementById("Number").onkeyup = function() ; function myMethod() 

Example #2

In our second example, we will demonstrate JavaScript code that appends “1” to each letter being pressed in the input field. Here we are using addEventListener() method to attach the event handler onkeyup event by calling myMethod and executing the statements in the method. Using this method enhances the readability of the code.

   
This example demonstrated use of addEventListener() method to attach a "keyup" event to an input field.
 
This method will append 1 at the end of each key pressed in the text field.
 Enter your Number:    

Recommended Articles

We hope that this EDUCBA information on “JavaScript onkeyup” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

JAVASCRIPT Course Bundle - 83 Courses in 1 | 18 Mock Tests
343+ Hours of HD Videos
83 Courses
18 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник