Question 45626 in CSS Question posted in
Some basic documentation can be found here.

How to save some text entered into a contenteditable div, so that it reappears on the HTML when reloaded? – CSS

I can’t figure out how I can save some text in a div which has ‘ContentEditable="true"’set?

Basically, I am very naive at coding HTML and CSS and JS is way out of my league. However, I have managed to make some sort of a day planner for myself using HTML and CSS.

The problem is that, I don’t know how to make the text that I put into a div in HTML (with contenteditable set to true) to remain and appear the next time I turn on the html file on a browser.

I am going to use my application only in localhost and don’t want to use any sort of database.

Looking forward to you guys’ expertise and kind help.
Required information is given below–

.quote
{
    width: 92%;
    height: 48vh;
    margin: 2% auto auto auto;
    background-color: beige;
    border-style: solid;
    border-width: 12px;
    border-color: aqua;
    display: grid;
    grid-template-rows: 12% auto;
}

.quote .p
{
    height: 100%;
    margin:0 auto auto 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12vh;
    background-image: linear-gradient(180deg, rgba(26,18,189,1) 51%, rgba(43,181,131,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quote .p p
{
    height: 100%;
    width: 100%;
    margin:0;
}

.quote .writetext
{
    min-height: 8vmax;
    max-height: 19vmax;
    width: 25.6vmax;
    margin: 12px auto 12px auto;
    border-style: solid;
    border-width: 2px;
    border-color: white;

    font-family: 'Patrick Hand', cursive;
    font-size: 4vh;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DayMaker- Welcome</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@-1,600&display=swap" rel="stylesheet">
</head>
<body>
     <div class="quote">
          <div class="p"><p>"</p></div>
          <div class="writetext" contenteditable="true">
          </div>
     </div>
</body>
</html>

NOTE: The given code snippets are part of a larger project. So, please ignore the graphical discrepancies.


This is a pic of the project I’m working on:-WE need to fix that box at bottom right

I tried to search for solution a lot on the web but couldn’t find any.
Sincerely looking forward to your help.

Tags:

2

Answers


  1. 0

    You need a database there is no way I know of to do it without the data base if you are having trouble with SQL you can use excel otherwise I do not have a solution except use a database

    Login or Signup to reply.
  2. 0

    Will this work? It uses a textarea element instead of div with conteneditable=true. Since you don’t have a database it stores the text in localstorage and retrieves from it on page reload.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>DayMaker- Welcome</title>
  <link rel="stylesheet" href="styles.css">
  <script src="scripts.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@-1,600&display=swap" rel="stylesheet">

  <style>
    #writetext {
      resize: none;
      background-color: inherit;
    }

  </style>
</head>

<body>
  <div class="quote">
    <div class="p">
      <p>"</p>
    </div>
    <textarea id="writetext" class="writetext"></textarea>
  </div>
  <script>
    const textarea = document.querySelector('#writetext');
    textarea.value = localStorage.getItem('writetext');

    textarea.addEventListener('change', () => {
      localStorage.setItem('writetext', textarea.value);
    })
  </script>
</body>

</html>

    Since there is no submit button you will have to lose focus from the textarea to save the text.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search