Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM InputEvent inputType Property
The HTML DOM InputEvent inputType property returns a string indicating the type of input action that triggered an input event. This property helps identify whether the user is typing text, deleting content, pasting, or performing other input operations on form elements.
Syntax
Following is the syntax for accessing the inputType property −
event.inputType
Return Value
The inputType property returns a string representing the type of input. Common values include −
"insertText"− When user types regular text"deleteContentBackward"− When user presses Backspace"deleteContentForward"− When user presses Delete"insertParagraph"− When user presses Enter"insertCompositionText"− When user inputs text via IME"historyUndo"− When user performs Ctrl+Z"historyRedo"− When user performs Ctrl+Y
Example
Following example demonstrates the InputEvent inputType property by detecting different input actions −
<!DOCTYPE html>
<html>
<head>
<title>InputEvent inputType Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
* {
padding: 2px;
margin: 5px;
}
input[type="text"] {
padding: 8px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
#divDisplay {
margin-top: 15px;
padding: 10px;
background-color: #f0f8ff;
border-radius: 5px;
min-height: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>InputEvent inputType Demo</legend>
<label>Type or edit text:
<input type="text" id="textSelect" oninput="getEventInputType(event)">
</label>
<div id="divDisplay">Start typing to see input type detection...</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getEventInputType(InputEvent) {
if(InputEvent.inputType === 'insertText')
divDisplay.textContent = 'You are typing: ' + textSelect.value;
else if(InputEvent.inputType === 'deleteContentBackward')
divDisplay.textContent = 'You are using backspace key';
else if(InputEvent.inputType === 'deleteContentForward')
divDisplay.textContent = 'You are using delete key';
else if(InputEvent.inputType === 'insertParagraph')
divDisplay.textContent = 'You pressed Enter key';
else if(InputEvent.inputType === 'historyUndo')
divDisplay.textContent = 'You performed Undo (Ctrl+Z)';
else if(InputEvent.inputType === 'historyRedo')
divDisplay.textContent = 'You performed Redo (Ctrl+Y)';
else
divDisplay.textContent = 'Input type: ' + InputEvent.inputType;
}
</script>
</body>
</html>
The output shows real-time detection of different input actions −
When typing: "You are typing: Hello" When using Backspace: "You are using backspace key" When using Delete: "You are using delete key" When pressing Enter: "You pressed Enter key"
Detecting Paste Operations
The inputType property can also detect when users paste content into the input field −
Example
<!DOCTYPE html>
<html>
<head>
<title>InputEvent - Paste Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Paste Detection Demo</h2>
<input type="text" id="pasteInput" oninput="detectPaste(event)"
placeholder="Try typing or pasting text here">
<p id="pasteResult">Action will be detected here...</p>
<script>
function detectPaste(event) {
var result = document.getElementById("pasteResult");
if(event.inputType === 'insertFromPaste') {
result.textContent = 'Content was pasted! Value: ' + event.target.value;
result.style.color = 'green';
} else if(event.inputType === 'insertText') {
result.textContent = 'Content was typed! Value: ' + event.target.value;
result.style.color = 'blue';
} else {
result.textContent = 'Action: ' + event.inputType;
result.style.color = 'black';
}
}
</script>
</body>
</html>
This example distinguishes between typed text and pasted content, displaying different messages for each action.
Input Types Reference
Following table shows common inputType values and their meanings −
| Input Type | Description | User Action |
|---|---|---|
| insertText | Regular text insertion | Typing on keyboard |
| insertFromPaste | Content inserted from clipboard | Ctrl+V or right-click paste |
| deleteContentBackward | Content deleted backwards | Backspace key |
| deleteContentForward | Content deleted forwards | Delete key |
| insertParagraph | Line break insertion | Enter key in textarea |
| historyUndo | Undo previous action | Ctrl+Z |
| historyRedo | Redo previous action | Ctrl+Y |
Browser Compatibility
The inputType property is supported in modern browsers including Chrome 60+, Firefox 66+, Safari 10.1+, and Edge 79+. For older browsers, the property may return undefined, so always check for its existence before using it.
Example − Safe Usage
<!DOCTYPE html>
<html>
<head>
<title>InputEvent - Safe Usage</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<input type="text" id="safeInput" oninput="safeInputTypeCheck(event)">
<p id="safeResult"></p>
<script>
function safeInputTypeCheck(event) {
var result = document.getElementById("safeResult");
if (event.inputType) {
result.textContent = 'Input Type: ' + event.inputType;
} else {
result.textContent = 'inputType not supported in this browser';
}
}
</script>
</body>
</html>
This example checks if the inputType property exists before using it, ensuring compatibility across different browsers.
Conclusion
The InputEvent inputType property provides precise information about the type of input operation performed by users. It enables developers to create more responsive and intelligent form interactions by distinguishing between typing, pasting, deleting, and other input actions. Always check browser compatibility and handle cases where the property might not be supported.
155 Views
