How to make Text Field Editable in HTML using JavaScript

Many user and programmer need to create an editable div in a web page which will give the facility to the programmer or to the user to insert new text in the textarea of the div and store it to the localStorage of the browser. 

So in today's article we are sharing a editable Div using HTML, Venilla JavaScript and we added lot of CSS to design our editable div.


Join Telegram For Fast Updates- Join Now

Join Instagram For Coding Tips & Tricks- Join Now


How this editable do works?

When you click in the area of the additable div converted into the editable form and it gives you the option to insert text, after inserting text then click on the outer area of the dv and it will automatically save your text into your localStorage of your browser and if you refresh this page it will stored in your browser. And you can also change the text of the editable div when you want.


Live Link - Editable Div

Download Code - Click Here

GitHub Repository - Editable Div


HTML Code For  Editable Div

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Editable Div - Geeks Help</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <!-- Main Container -->
    <div class="container">
        <h1 id="heading" class='yourhead rhia is'> Editable Div Using JavaScript</h1>
        <div class="child red good" id="myfirst">
    </div>
</body>

<!-- Including JavaScript to HTML File -->
<script src="script.js"></script>
</html>


CSS Code For  Editable Div to Add Some Design

/* Little bit CSS to add some style to out editable div */


* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(37 17 116);
  color: white;
  flex-direction: column;
}


#elem {
  border-radius: 15px;
}
#textarea {
  padding: 15px;
  width: 90%;
  border: none;
  border-radius: 15px;
  font-size: 1.1rem;
}


JavaScript Code to Add Functionality

// Out JavaScript Code for Editable Div



// Creating a div with javascript
let divElem = document.createElement('div');


// Styling the created div
divElem.setAttribute('id', 'elem');
divElem.setAttribute('class', 'elem');
divElem.setAttribute('style', 'border: 2px solid #fff; margin:23px; padding:23px; width:auto;overflow:hidden;');

// Creating variable for storing text of editable div in the localStorage of your browser
let val = localStorage.getItem('text');
let text;
if (val == null) {

    text = document.createTextNode('This is my editable div. Click to edit it.');
}
else {
    text = document.createTextNode(val)
}

// Insert created text into editable div
divElem.appendChild(text);

// Grab the cotainer
let container = document.querySelector('.container');
let first = document.getElementById('myfirst');

// Insert the created div
container.insertBefore(divElem, first)

// Adding Click and Blur Event Listner on the editable div
divElem.addEventListener('click', function () {
    let noTextArea = document.getElementsByClassName('textarea').length;
    if (noTextArea == 0) {
        let html = elem.innerHTML;
        divElem.innerHTML = `<textarea class="textarea form-control" id="textarea" rows="3">${html}</textarea>`;
    }
    let textarea = document.getElementById('textarea');
    textarea.addEventListener('blur', function () {
        elem.innerHTML = textarea.value;
        localStorage.setItem('text', textarea.value);
    })
})



// Editable Div By Geeks Help (www.geekshelp.in)


Visit our Coding Discussion Page- Visit Now

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming-related Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad