從字段集中獲取輸入值？

Question

我有一個 contenteditable=true 的字段集，我想獲取它的值以保存在本地存儲中。 我正在嘗試制作一個保存和加載按鈕。 我想單擊保存按鈕，它將值保存在字段集中，然后當單擊加載按鈕時，我從本地存儲中獲取值並將其放入字段集中。 下面的代碼包括什么不起作用。 當我保存它並控制台記錄本地存儲中的值時，它顯示未定義。

HTML 代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="buttons">
      <button
        class="bold"
        onclick="document.execCommand('bold',false,null);"
        title="Bold"
      >
        𝗕
      </button>

      <button
        class="italic"
        onclick="document.execCommand('italic',false,null);"
        title="Italic"
      >
        𝘐
      </button>

      <button
        class="underline"
        onclick="document.execCommand('underline',false,null);"
        title="Underline"
      >
        U̲
      </button>

      <input
        type="color"
        class="color-picker"
        id="colorPicker"
        oninput="changeColorText(this.value);"
        title="Change text color"
      />

      <button id="highlight"><mark>A</mark></button>

      <button id="bulletPoint">•</button>

      <!-- Make something to change the font size -->
      <button id="fontSize" onclick="changeFont()">Change</button>
      <input type="number" id="fontInput" placeholder="Size" />

      <select id="fontList">
        <option value="Arial">Arial</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Courier New">Courier New</option>
        <option value="Georgia">Georgia</option>
        <option value="Helvetica">Helvetica</option>
        <option value="Impact">Impact</option>
        <option value="Lucida Console">Lucida Console</option>
        <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
        <option value="Palatino Linotype">Palatino Linotype</option>
        <option value="Tahoma">Tahoma</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Trebuchet MS">Trebuchet MS</option>
        <option value="Verdana">Verdana</option>
      </select>
    </div>

    <!-- Make a button to save the text in local storage when clicked -->
    <button id="save">Save</button>

    <!-- Make a button to load the text from localstorage -->
    <button id="load">Load</button>

    <fieldset class="userInput" contenteditable="true"></fieldset>
    <script src="use.js"></script>
  </body>
</html>

Javascript 代碼：

var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");
var bulletPointBtn = document.querySelector("#bulletPoint");
var fontSize = document.querySelector("#fontSize");
var fontInput = document.querySelector("#fontInput");
var fontList = document.querySelector("#fontList");
var saveBtn = document.querySelector("#save");
var userInput = document.querySelector(".userInput");
var loadBtn = document.querySelector("#load");

boldBtn.addEventListener("click", function () {
  boldBtn.classList.toggle("inUse");
});

italicBtn.addEventListener("click", function () {
  italicBtn.classList.toggle("inUse");
});

underlineBtn.addEventListener("click", function () {
  underlineBtn.classList.toggle("inUse");
});

highlightBtn.addEventListener("click", function () {
  highlightBtn.classList.toggle("inUse");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document.getElementById("highlight").addEventListener("click", function () {
  var range = window.getSelection().getRangeAt(0),
    span = document.createElement("span");

  span.className = "highlight";
  span.appendChild(range.extractContents());
  range.insertNode(span);
});
//Add a bullet point using the html tag <ul> when the user clicks on the bullet point button
bulletPointBtn.addEventListener("click", function () {
  document.execCommand("insertHTML", false, "<ul><li>&nbsp;</li></ul>");
});

function changeFont() {
  document.execCommand("fontSize", false, "7");
  var fontElements = document.getElementsByTagName("font");
  for (var i = 0, len = fontElements.length; i < len; ++i) {
    if (fontElements[i].size == "7") {
      fontElements[i].removeAttribute("size");
      fontElements[i].style.fontSize = fontInput.value + "px";
    }
  }
}
// Make the font whatever the user selects from the dropdown menu
fontList.addEventListener("change", function () {
  document.execCommand("fontName", false, fontList.value);
});

// When the user clicks the save button, save the text from the fieldset to local storage
saveBtn.addEventListener("click", function () {
  localStorage.setItem("userInput", userInput.value);
  console.log(localStorage.getItem("userInput"));
});

//When the user clicks the load button, load the text from local storage to the fieldset and display it if it exists
loadBtn.addEventListener("click", function () {
  if (localStorage.getItem("userInput")) {
    userInput.value = localStorage.getItem("userInput");
  }
});

Answer 1

這是因為 'fieldset' 元素默認不包含 'value' 屬性。 您可以使用“textContent”從您的字段集中獲取文本輸入。

這將如下所示：

saveBtn.addEventListener("click", function () {
  localStorage.setItem("userInput", userInput.textContent);
  console.log(localStorage.getItem("userInput"));
});

loadBtn.addEventListener("click", function () {
  if (localStorage.getItem("userInput")) {
    userInput.textContent = localStorage.getItem("userInput");
  }
});

從字段集中獲取輸入值？

問題描述

1 個解決方案

解決方案1
0 2022-08-09 02:25:06

從字段集中獲取輸入值？

問題描述

1 個解決方案

解決方案1 0 2022-08-09 02:25:06

解決方案1
0 2022-08-09 02:25:06