EN
JavaScript - onkeyup event example
0 points
In this article, we would like to show you onkeyup
event example in JavaScript.
Quick solution:
xxxxxxxxxx
1
var myElement = document.querySelector('#my-element');
2
3
myElement.addEventListener('keyup', function() {
4
console.log('onkeyup event occurred.');
5
});
or:
xxxxxxxxxx
1
<input type="text" onkeyup="handleKeyup()">
or:
xxxxxxxxxx
1
var myElement = document.querySelector('#my-element');
2
3
myElement.onkeyup = function() {
4
console.log('onkeyup event occurred.');
5
};
There are three common ways how to use onkeyup
event:
- with event listener,
- with element attribute,
- with element property.
In this section, we want to show how to use onkeyup
event on input
element via event listener mechanism.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<p>Type something: </p>
5
<input type="text" id="my-input">
6
<script>
7
var myInput = document.querySelector('#my-input');
8
9
myInput.addEventListener('keyup', function() {
10
console.log('onkeyup event occurred.');
11
});
12
</script>
13
</body>
14
</html>
In this section, we want to show how to use onkeyup
event on input
element via attribute.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<p>Type something: </p>
5
<input type="text" onkeyup="handleKeyup()">
6
<script>
7
function handleKeyup(){
8
console.log('onkeyup event occurred.');
9
}
10
</script>
11
</body>
12
</html>
In this section, we want to show how to use onkeyup
event on input
element via property.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<p>Type something: </p>
5
<input type="text" id="my-input">
6
<script>
7
var myInput = document.querySelector('#my-input');
8
9
myInput.onkeyup = function() {
10
console.log('onkeyup event occurred.');
11
};
12
</script>
13
</body>
14
</html>