用一個div模擬textarea的實現

王铁柱6發表於2024-11-22
<!DOCTYPE html>
<html>
<head>
<title>Div as Textarea</title>
<style>
#textarea-div {
  width: 300px;
  height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: auto;
  font-family: monospace; /* 保持等寬字型 */
  white-space: pre-wrap; /* 保留空格和換行 */
}
</style>
</head>
<body>

<div id="textarea-div" contenteditable="true"></div>

<script>
  const div = document.getElementById('textarea-div');

  // 獲取div內容
  function getDivContent() {
    return div.textContent;
  }

  // 設定div內容
  function setDivContent(content) {
    div.textContent = content;
  }

  // 示例：獲取和設定內容
  console.log("Initial content:", getDivContent());

  setDivContent("This is some new text.\nWith multiple lines.");

  console.log("Updated content:", getDivContent());


  // 可選：新增placeholder
  div.addEventListener('focus', function() {
    if (div.textContent === 'Placeholder text') {
      div.textContent = '';
    }
  });

  div.addEventListener('blur', function() {
    if (div.textContent === '') {
      div.textContent = 'Placeholder text';
    }
  });

    // 可選：限制輸入字數
    div.addEventListener('input', function() {
        const maxLength = 200; // 例如，最多200個字元
        if (div.textContent.length > maxLength) {
            div.textContent = div.textContent.slice(0, maxLength);
        }
        // 可選：顯示剩餘字數
        console.log("Remaining characters:", maxLength - div.textContent.length);
    });


</script>

</body>
</html>

關鍵點解釋:

  • contenteditable="true": 這是核心，使div變成可編輯狀態。
  • white-space: pre-wrap;: 保留空格和換行符，使文字的格式與textarea一致。 其他可選值包括pre (保留所有空格和換行) 和 pre-line (合併連續空格，保留換行)。
  • overflow-y: auto;: 當內容超出div高度時，顯示垂直捲軸。
  • font-family: monospace;: 使用等寬字型，使文字更像在程式碼編輯器或textarea中。
  • JavaScript部分: 演示瞭如何使用 textContent 獲取和設定div的內容。
  • Placeholder: 新增了 focus 和 blur 事件監聽器來模擬placeholder功能。
  • 字數限制: 新增了 input 事件監聽器來限制輸入字數，並提供剩餘字數的反饋。

優點:

  • 更靈活的樣式控制: 可以使用CSS完全控制div的外觀，比textarea更靈活。
  • 更容易整合到富文字編輯器: 可以更方便地與其他HTML元素結合使用，例如在富文字編輯器中。

缺點:

  • 功能不如原生textarea完善: 例如，原生textarea支援 rows 和 cols 屬性直接控制大小，以及一些鍵盤事件的處理。 模擬的div需要額外的JavaScript程式碼來實現這些功能。
  • 跨瀏覽器相容性問題: 雖然 contenteditable 在現代瀏覽器中得到廣泛支援，但在一些舊版瀏覽器中可能存在相容性問題。

這個例子提供了一個基本的模擬textarea的實現，你可以根據自己的需求進行修改和擴充套件。例如，可以新增更豐富的事件處理、輸入格式控制等功能。

相關文章