Programming Tutorials

(追記) (追記ここまで)

HTML Text onBlur() onFocus() onSelect() onChange() using JavaScript

By: aathishankaran in JavaScript Tutorials on 2007年03月27日 [フレーム]

In JavaScript, the following are the common event handlers for handling text input:

onblur: The onblur event occurs when an element loses focus, and is often used to validate form inputs.

Example:

<input type="text" id="myInput" onblur="validateInput()">
<script>
function validateInput() {
 var input = document.getElementById("myInput");
 if (input.value === "") {
 alert("Input cannot be empty");
 }
}
</script>

onchange: The onchange event occurs when the value of an element changes, and is often used to perform an action when a user selects an option from a dropdown list.

Example:

<select id="mySelect" onchange="changeColor()">
 <option value="red">Red</option>
 <option value="green">Green</option>
 <option value="blue">Blue</option>
</select>
<script>
function changeColor() {
 var select = document.getElementById("mySelect");
 var color = select.value;
 document.body.style.backgroundColor = color;
}
</script>

onselect: The onselect event occurs when a user selects text in an input field or textarea, and is often used to perform an action on the selected text.

Example:

<textarea id="myTextarea" onselect="highlightText()"></textarea>
<script>
function highlightText() {
 var textarea = document.getElementById("myTextarea");
 var selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
 alert("Selected text: " + selectedText);
}
</script>

onfocus: The onfocus event occurs when an element gains focus, and is often used to perform an action when a user clicks on an input field or textarea.

Example:

<input type="text" id="myInput" onfocus="showHint()" onblur="hideHint()">
<div id="hint" style="display: none;">Enter your name</div>
<script>
function showHint() {
 var hint = document.getElementById("hint");
 hint.style.display = "block";
}
function hideHint() {
 var hint = document.getElementById("hint");
 hint.style.display = "none";
}
</script>

These are just a few examples of how to handle text input events in JavaScript. There are many more events and event handlers that can be used to create dynamic and interactive web applications.

Previous
<< Handling Select options in JavaScript

Next
TextArea onChange, onKeyPress, onFocus, onBlur, onCut, onCopy, and onPaste using JavaScript>>

(追記) (追記ここまで)