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:

1. 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>

2. 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>

3. 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>

4. 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>