JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
Home » Javascript »
Javascript Input Events
- onsubmit - When a user clicks the submit button
- onchange - When a user changes the content of an input field
- onselect - When input text is selected
- onkeypress - When a user is pressing/holding down a key
- onchange - When a user selects a dropdown value
- onfocus - When an input field gets focus
- onblur - When a user leaves an input field
- onkeyup - When the user releases a key
- onkeydown - When a user is pressing/holding down a key
- onreset - When a user clicks the reset button
Examples onsubmit :-
onsubmit is an event that occurs when you try to submit a form. You can put your form validation against this event type.
File Name:- index.php
<!DOCTYPE html><html>
<head>
<script>
function confirmInput() {
fname = document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to www.gmaxlifesciences.com");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="http://www.gmaxlifesciences.com/">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
Examples 2 onsubmit :-
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>When you submit the form, a function is called which alerts some text.</p>
<form action="demo_form.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>
Examples 3 onsubmit :-
File Name:- index.php
<html><head>
<script type="text/javascript">
function CheckAndSubmit () {
var userName = document.getElementById ("userName");
if (userName.value.length < 3) {
alert ("The name of the user must be at least 3 characters long!");
return false;
}
var password = document.getElementById ("password");
var repassword = document.getElementById ("repassword");
if (password.value.length < 6) {
alert ("The password must be at least 6 characters long!");
return false;
}
if (repassword.value != password.value) {
alert ("The two passwords are different!");
return false;
}
var acceptAgreement = document.getElementById ("acceptAgreement");
if (!acceptAgreement.checked) {
alert ("You must accept the User Agreement to register!");
return false;
}
return true;
}
</script>
</head>
<body>
<form id="regForm" method="post" action="#URL#" onsubmit="return CheckAndSubmit ()">
User Name: <input type="text" name="userName" id="userName" />
<br />
Password: <input type="password" name="password" id="password" />
<br />
Repeat Password: <input type="password" name="repassword" id="repassword" />
<br /><br />
<input type="checkbox" name="acceptAgreement" id="acceptAgreement" />
<label for="acceptAgreement">I accept the User Agreement and Privacy Policy</label>
<br /><br />
<input type="submit" value="Register" />
</form>
</body>
</html>
Examples 4 onsubmit :-
File Name:- index.php
<!DOCTYPE html><html>
<body>
<script>
function checkRegistration(){
var form_valid = (document.getElementById('some_input').value == 'google');
if(!form_valid){
alert('Given data is incorrect');
return false;
}
return true;
}
</script>
<form onsubmit="return checkRegistration()" method="get" action="http://google.com">
Write google to go to google..<br/>
<input type="text" id="some_input" value=""/>
<input type="submit" value="google it"/>
</form>
</body>
</html>
Examples 5 onselect :-
The onselect event occurs after some text has been selected in an element. The onselect event is mostly used on <input type="text"> or <textarea> elements.
File Name:- index.php
<!DOCTYPE html><html>
<body>
Select some of the text: <input type="text" value="Hello world!" onselect="myFunction()">
<script>
function myFunction() {
alert("You selected some text!");
}
</script>
</body>
</html>
Examples 6 onkeypress :-
The onkeypress event occurs when the user presses a key (on the keyboard).
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
Examples 7 onkeypress :-
The onkeypress event occurs when the user presses a key (on the keyboard).
File Name:- index.php
<html><head>
<script type="text/javascript">
function GetChar (event){
var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
alert ("The Unicode character code is: " + chCode);
}
</script>
</head>
<body>
<input size="40" value="Write a character into this field!" onkeypress="GetChar (event);"/>
</body>
</html>
Examples 8 onkeypress :-
Characters which you type here will be upper-cased
File Name:- index.php
<input id='my' type="text"><script>
document.getElementById('my').onkeypress = function(event) {
var char = getChar(event || window.event)
if (!char) return // special key
this.value = char.toUpperCase()
return false
}
</script>
Examples 9 onkeypress :-
Write an input which accepts only digits.
File Name:- index.php
<input id='my' type="text"><script>
input.onkeypress = function(e) {
e = e || event
var chr = getChar(e)
if (!isNumeric(chr) && chr !== null) {
return false
}
}
</script>
/>
Examples 10 onkeypress :-
File Name:- index.php
<html><head>
<title>Keypress event example in JavaScript</title>
<script language="Javascript">
var res = "";
function keydown1(evt, t) {
res = "keydown- keycode:" + evt.keyCode + ", value:" + t.value + "<br/>";
document.getElementById("tdresult").innerHTML = res;
}
function keypress1(evt, t) {
if (window.event)
res = res + "keypress- keycode:" + evt.keyCode + ", value:" + t.value + "<br/>";
else
res = res + "keypress- keycode:" + evt.charCode + ", value:" + t.value + "<br/>";
document.getElementById("tdresult").innerHTML = res;
}
</script>
</head>
<body>
<table align="left">
<tr>
<td>
Enter Value :
<input type="text" id="Text1" onkeydown="keydown1(event,this);" onkeypress="keypress1(event,this);"
style="width: 200px;" />
</td>
</tr>
<tr>
<td id="tdresult">
</td>
</tr>
</table>
</body>
</html>
Examples 11 onkeypress :-
The onkeypress event occurs when the user presses a key (on the keyboard).
File Name:- index.php
<html><head>
<script type="text/javascript">
function Init () {
var counter = document.getElementById ("counter");
for (var i = 1; i < 1000; i++) {
var option = new Option (i, i);
counter.options.add (option);
}
counter.focus ();
}
function OnKeyPressCounter (event, counter) {
var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
if (chCode == 43 /* + */) {
if (counter.selectedIndex < counter.options.length - 1) {
counter.selectedIndex++;
}
}
if (chCode == 45 /* - */) {
if (counter.selectedIndex > 0) {
counter.selectedIndex--;
}
}
}
</script>
</head>
<body onload="Init ()">
Use the + and - keys to increase/decrease the counter.
<select id="counter" onkeypress="OnKeyPressCounter (event, this)" style="width:80px"></select>
</body>
</html>
Examples 12 onkeypress :-
This example shows how to create a text field that does not accept numeric input:
File Name:- index.php
<html><head>
<script type="text/javascript">
function FilterInput (event) {
var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
// returns false if a numeric character has been entered
return (chCode < 48 /* '0' */ || chCode > 57 /* '9' */);
}
</script>
</head>
<body>
The following text field does not accept numeric input:
<input type="text" onkeypress="return FilterInput (event)" />
</body>
</html>
Examples 13 onkeypress :-
File Name:- index.php
<html><body>
<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>
</body>
<script>
function edValueKeyPress()
{
var edValue = document.getElementById("edValue");
var s = edValue.value;
var lblValue = document.getElementById("lblValue");
lblValue.innerText = "The text box contains: "+s;
//var s = $("#edValue").val();
//$("#lblValue").text(s);
}
</script>
</html>
The Keypress Event (onkeypress)
The keypress event occurs when a user presses down a key on the keyboard that has a character value associated with it. For example, keys like Ctrl, Shift, Alt, Esc, Arrow keys, etc. will not generate a keypress event, but will generate a keydown and keyup event.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Keypress Event</title>
</head>
<body>
<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<hr>
<textarea cols="30" onkeypress="alert('You have pressed a key inside textarea!')"></textarea>
<p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p>
</body>
</html>
Examples 14 onkeyup :-
The onkeyup event occurs when the user releases a key
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
The Keyup Event (onkeyup)
The keyup event occurs when the user releases a key on the keyboard.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Keyup Event</title>
</head>
<body>
<input type="text" onkeyup="alert('You have released a key inside text input!')">
<hr>
<textarea cols="30" onkeyup="alert('You have released a key inside textarea!')"></textarea>
<p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p>
</body>
</html>
The Keydown Event (onkeydown)
The keydown event occurs when the user presses down a key on the keyboard.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Keydown Event</title>
</head>
<body>
<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<hr>
<textarea cols="30" onkeydown="alert('You have pressed a key inside textarea!')"></textarea>
<p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p>
</body>
</html>
Examples 15 onfocus :-
The onfocus event occurs when an element gets focus. The onfocus event is most often used with <input>, <select>, and <a>.
The onfocus event is the opposite of the onblur event.
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>A function is triggered when one of the input fields get focus. The function changes the background-color of the input field.</p>
First name: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="myFunction(this.id)">
<script>
function myFunction(x) {
document.getElementById(x).style.background = "yellow";
}
</script>
</body>
</html>
Examples 15 onfocus :-
The onfocus event occurs when an element gets focus. The onfocus event is most often used with <input>, <select>, and <a>.
The onfocus event is the opposite of the onblur event.
File Name:- index.php
<html><head>
<title>Onfocus event example in JavaScript</title>
<script language="Javascript">
var cnt = 0;
var arybg = new Array("Red", "Green", "Blue", "Yellow", "Black", "Brown");
function onfocusevt(evt, t) {
if (cnt == arybg.length)
cnt = 0;
t.style.backgroundColor = arybg[cnt];
cnt++;
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
Place the curosr in the below texboxes.
</td>
</tr>
<tr>
<td>
<input type="text" id="Text1" onfocus="onfocusevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text2" onfocus="onfocusevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text3" onfocus="onfocusevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text4" onfocus="onfocusevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text5" onfocus="onfocusevt(event,this);" />
</td>
</tr>
</table>
</body>
</html>
The Focus Event (onfocus)
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Focus Event</title>
</head>
<body>
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
</body>
</html>
Examples 16 onblur Event :-
Execute a JavaScript when a user leaves an input field:
The onblur event occurs when an object loses focus.
The onblur event is most often used with form validation code (e.g. when the user leaves a form field).
Tip: The onblur event is the opposite of the onfocus event.
File Name:- index.php
<!DOCTYPE html><html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Examples 16 onblur Event :-
Execute a JavaScript when a user leaves an input field:
The onblur event occurs when an object loses focus.
The onblur event is most often used with form validation code (e.g. when the user leaves a form field).
Tip: The onblur event is the opposite of the onfocus event.
File Name:- index.php
<html><head>
<title>Onblur event example in JavaScript</title>
<script language="Javascript">
var cnt = 0;
var arybg = new Array("Red", "Green", "Blue", "Yellow", "Black", "Brown");
function onblurevt(evt, t) {
if (cnt == arybg.length)
cnt = 0;
t.style.backgroundColor = arybg[cnt];
cnt++;
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
Place the curosr in the below texboxes one after one.
</td>
</tr>
<tr>
<td>
<input type="text" id="Text1" onblur="onblurevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text2" onblur="onblurevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text3" onblur="onblurevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text4" onblur="onblurevt(event,this);" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Text5" onblur="onblurevt(event,this);" />
</td>
</tr>
</table>
</body>
</html>
Examples onreset Event :-
The onreset event occurs when a form is reset.
File Name:- index.php
<!DOCTYPE html><html>
<body>
<p>When you reset the form, a function is triggered which alerts some text.</p>
<form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>
<script>
function myFunction() {
alert("The form was reset");
}
</script>
</body>
</html>
The Change Event (onchange)
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Change Event</title>
</head>
<body>
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
<p><strong>Note:</strong> Select any option in select box to see how it works.</p>
</body>
</html>
The Submit Event (onsubmit)
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Submit Event</title>
</head>
<body>
<form action="/examples/html/action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Load Event (onload)
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Load Event</title>
</head>
<body onload="window.alert('Page is loaded successfully!');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
</html>
File name : index.php