Programming Tutorials

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

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

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

In JavaScript, you can handle textarea elements similar to text input fields. You can use various event handlers to detect and respond to user interactions with the textarea. Here are a few examples:

onChange event handler: This handler is called when the content of the textarea is changed by the user. Here's an example:

<textarea id="myTextarea" onChange="handleChange()"></textarea>
<script>
function handleChange() {
 var textarea = document.getElementById("myTextarea");
 console.log("Textarea value changed: " + textarea.value);
}
</script>

onKeyPress event handler: This handler is called when a key is pressed down while the textarea has focus. Here's an example:

<textarea id="myTextarea" onKeyPress="handleKeyPress(event)"></textarea>
<script>
function handleKeyPress(event) {
 console.log("Key pressed: " + event.key);
}
</script>

onFocus and onBlur event handlers: These handlers are called when the textarea receives and loses focus, respectively. Here's an example:

<textarea id="myTextarea" onFocus="handleFocus()" onBlur="handleBlur()"></textarea>
<script>
function handleFocus() {
 console.log("Textarea received focus");
}
function handleBlur() {
 console.log("Textarea lost focus");
}
</script>

onCut, onCopy, and onPaste event handlers: These handlers are called when the user cuts, copies, or pastes text in the textarea, respectively. Here's an example:

<textarea id="myTextarea" onCut="handleCut()" onCopy="handleCopy()" onPaste="handlePaste()"></textarea>
<script>
function handleCut() {
 console.log("Text cut from textarea");
}
function handleCopy() {
 console.log("Text copied from textarea");
}
function handlePaste() {
 console.log("Text pasted into textarea");
}
</script>

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

Next
Strings in JavaScript>>

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