javascript 如何保存输入到contenteditable div中的一些文本，以便在重新加载时重新出现在HTML中？

ccgok5k5 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(274)

我不知道如何在设置了"ContentEditable =" true ""的div中保存一些文本？
基本上，我在编码HTML和CSS方面非常天真，JS远远超出了我的能力范围。然而，我已经设法使用HTML和CSS为自己制作了某种日程安排。
问题是，我不知道如何使我放入HTML div中的文本（contenteditable设置为true）保留下来，并在下次我在浏览器上打开html文件时显示出来。
我打算只在localhost中使用我的应用程序，不想使用任何类型的数据库。
期待你们的专业知识和善意的帮助。所需信息如下--

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

注意：给定的代码片段是一个更大项目的一部分。因此，请忽略图形差异。
This is a pic of the project I'm working on:-我们需要修复右下角的框
我试着在网上搜索了很多解决方案，但没有找到任何。真诚地期待您的帮助。

JavaScript

来源：https://stackoverflow.com/questions/75302155/how-to-save-some-text-entered-into-a-contenteditable-div-so-that-it-reappears-o

2条答案

按热度按时间

6vl6ewon1#

你需要一个数据库，有没有办法，我知道这样做没有数据库，如果你有麻烦的SQL，你可以使用excel，否则我没有一个解决方案，除了使用数据库

赞(0）回复(0）举报 2023-02-02

flvlnr442#

这个方法有效吗？它使用一个textarea元素代替了conteneditable=true的div.因为你没有数据库，所以它把文本存储在本地存储器中，并在页面重载时从本地存储器中检索。

<!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>

由于没有提交按钮，您将不得不从文本区域失去焦点来保存文本。

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 如何保存输入到contenteditable div中的一些文本，以便在重新加载时重新出现在HTML中？

2条答案

相关问题

热门标签

最新问答