Ways to display the innerHTML of a textarea once the current content has been removed

Question

Ways to display the innerHTML of a textarea once the current content has been removed

My current task involves toggling the visibility of a textarea's innerHTML based on focus and blur events. The functionality is working as expected, but I have encountered an issue. When I delete the text entered in the textarea, the innerHTML remains hidden even though it still exists within the element. Here are the steps to replicate the issue:

Enter text inside the textarea
Select all the text and delete it
Mouse out from the textarea
The innerHTML is not visible in the browser
However, the innerHTML is visible when inspecting elements in the browser

let textarea = document.querySelectorAll("textarea");

for (i = 0; i < textarea.length; i++) {
  let innertext = textarea[i].innerHTML;

  textarea[i].addEventListener("focus", (e) => {
    e.target.innerHTML = "";
  })

  textarea[i].addEventListener("blur", (e) => {
    e.target.innerHTML = innertext;
  })
}

<textarea name="" id="" cols="30" rows="10">Test</textarea>

javascript textarea innerhtml onblur onfocus

Answer 1

Answer №1

To update or retrieve the value of a textarea, it is recommended to use the .value property instead of .innerHTML. The innerHTML property does not reflect changes made to the textarea's content in the browser.

let textarea = document.querySelectorAll("textarea");

for (i = 0; i < textarea.length; i++) {
  let innertext = textarea[i].innerHTML;

  textarea[i].addEventListener("focus", (e) => {
    e.target.value = "";
  })

  textarea[i].addEventListener("blur", (e) => {
    e.target.value = innertext;
  })
}

<textarea name="" id="" cols="30" rows="10">Test</textarea>

Answer 2

To update or retrieve the value of a textarea, it is recommended to use the .value property instead of .innerHTML. The innerHTML property does not reflect changes made to the textarea's content in the browser.

let textarea = document.querySelectorAll("textarea");

for (i = 0; i < textarea.length; i++) {
  let innertext = textarea[i].innerHTML;

  textarea[i].addEventListener("focus", (e) => {
    e.target.value = "";
  })

  textarea[i].addEventListener("blur", (e) => {
    e.target.value = innertext;
  })
}

<textarea name="" id="" cols="30" rows="10">Test</textarea>

Answer 3

Answer №2

This code snippet showcases how to manipulate placeholder text in a textarea element:

<textarea name="" id="" cols="30" rows="10" placeholder='Test'></textarea>

let allTextareas = document.querySelectorAll("textarea");

for(let i=0; i<allTextareas.length; i++) {
  let currentPlaceholder = allTextareas[i].placeholder;
  
  allTextareas[i].addEventListener("focus", (e) => {
    console.log(e.target.placeholder);
    e.target.placeholder = '';
  });

  allTextareas[i].addEventListener("blur", (e) => {
    e.target.placeholder = currentPlaceholder;
  });
}

Answer 4

This code snippet showcases how to manipulate placeholder text in a textarea element:

<textarea name="" id="" cols="30" rows="10" placeholder='Test'></textarea>

let allTextareas = document.querySelectorAll("textarea");

for(let i=0; i<allTextareas.length; i++) {
  let currentPlaceholder = allTextareas[i].placeholder;
  
  allTextareas[i].addEventListener("focus", (e) => {
    console.log(e.target.placeholder);
    e.target.placeholder = '';
  });

  allTextareas[i].addEventListener("blur", (e) => {
    e.target.placeholder = currentPlaceholder;
  });
}

Ways to display the innerHTML of a textarea once the current content has been removed

Answer №1

Answer №2

Similar questions

Implementing JavaScript: Grouping JSON Response by Date and Category in a Table

align image vertically within a floated container

"Enhance your data management with Laravel and Vue.js by incorporating the powerful Matfish Vue-Table

How to use jQuery to scroll to the top of a specific container div

Implementing AngularJS ng-show and ng-hide directives with animated toggle class

Tips on aligning a span element at the center of an image without losing its mouseover

On my WordPress Elementor website, I am looking to have the button on my product card linked to a specific

Guide to clicking on a Javascript button using Selenium

What is the best way to extend the width of an element within a Bootstrap column beyond the column itself?

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

Is it true that Firefox fails to display javascript errors on AJAX 'threads'?

Using React's state to hide a div reveals the div with a flicker when saving the information

What are the steps for initializing a session in Vue.js with Django upon a successful login?

Challenge: RxJS timeout function not functioning as expected

Utilizing JavaScript and jQuery libraries in conjunction with periods

Hide dropdown when clicked outside of it

The value returned by a component should remain consistent regardless of where it is invoked. Additionally, the main component in React should not re-render when the state of a sub-component is

Sorting objects in an array according to their prices: A guide

Troubleshooting issue with jQuery subtraction not functioning as expected

``As I navigate through my react native app, I encounter the challenge of receiving the BackHandler