怎么在HTML5中使用textarea實現(xiàn)高度自適應(yīng)-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)怎么在HTML5中使用 textarea實現(xiàn)高度自適應(yīng)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計服務(wù)，主要包括網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、手機APP定制開發(fā)、重慶小程序開發(fā)、宣傳片制作、LOGO設(shè)計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗豐富的經(jīng)驗，可以確保每一個作品的質(zhì)量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。 

方案一

HTML5 Textarea 元素

1. 自動獲得焦點

點擊編輯自動獲得焦點后光標跳轉(zhuǎn)到了最前面，why?

查文檔 MDN，textarea元素存在selectionEnd和selectionStart的屬性用來表示選中的文本開始位置和結(jié)束位置，DOM接口實例是HTMLTextAreaElement， 它具有setSelectionRange方法，用來選中輸入框中的文本，用法：TextAreaElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

那么我們只要做到selectionStart === selectionEnd === value.length, 這樣光標就選中到最末尾。

edit.addEventListener("click", function() {
  txt.classList.add("hidden");
  document.body.insertBefore(textarea, edit);
  textarea.innerHTML = "這是需要編輯的信息";
  textarea.focus();
  // textarea.selectionEnd = textarea.innerHTML.length;

  textarea.setSelectionRange(
    textarea.innerHTML.length,
    textarea.innerHTML.length
  );
});

2. 自適應(yīng)高度

當不設(shè)置高度時換行會出現(xiàn)滾動條，所以只要讓textarea滾動條消失，讓其height = scrollHieght, 那么如何監(jiān)聽textarea的變化，則需要input事件，讓textarea高度動態(tài)等于它的scrollHeight即可，代碼如下：

textarea.addEventListener("input", function() {
    this.style.height = `${this.scrollHeight}px`;
});

為什么每次輸入都會使得高度增加(每次增加4px)，經(jīng)過測試Safari同樣也是這個效果，Firefox符合預(yù)期高度不異常增加，查看Chrome控制臺發(fā)現(xiàn)textarea內(nèi)置了很多樣式，嘗試將去掉padding后，可以正常隨著內(nèi)容增加高度自適應(yīng)了。

<style>
textarea {
  padding: 0;
}
</style>
<textarea></textarea>
<script>
const textarea = document.createElement("textarea");
textarea.addEventListener("input", function(e) {
  this.style.height = `${this.scrollHeight}px`;
});
</script>

為什么去掉padding值，輸入后高度就不增加了？（未找到合理的解釋，歡迎留言討論解答）

但是刪除文本的情況下height并未能自動縮放，分析原因， 當刪除文本換行的時候scrollHeight的大小并未發(fā)生改變，scrollHeight作為只讀屬性( MDN-文檔)，如何讓scrollHeight高度重新計算哪？只有改變高度，于是：

textarea.addEventListener("input", function(e) {
  this.style.height = "inherit";
  this.style.height = `${this.scrollHeight}px`;
});

到此高度自適應(yīng)輸入內(nèi)容完成，但是每次換行的閃動很難受，transition走一波，

textarea {
  overflow: hidden;  // 防止換行出現(xiàn)滾動條閃動
  padding: 5px 10px;
  box-sizing: border-box;
  transition: all 0.2s linear;
}

結(jié)果transition并沒效果，原因height初始值或者參考值必須為數(shù)值過渡動畫才會生效，height設(shè)置為auto或者inherit動畫不會生效， 所以折中的辦法就是當刪除的時候重新重置高度，輸入時不需要重置，這樣輸入時動畫生效， 刪除沒有動畫， 暫時沒想到更好的辦法。

textarea.addEventListener("keyup", function(e) {
  if (e.keyCode === 8) {
    this.style.height = "inherit";
    this.style.height = `${this.scrollHeight}px`;
  } else {
    this.style.height = `${this.scrollHeight}px`;
  }
});

3. 支持粘貼文本，圖片等

textarea只能輸入文本，無法實現(xiàn)粘貼圖片。

textarea.addEventListener(
  "paste",
  function(e) {
    e.preventDefault();
    console.log(
      "paste",
      e.clipboardData.items,
      e.clipboardData.types,
      e.clipboardData.getData("text/html"),
      e.clipboardData.getData("text/plain"),
      e.clipboardData.getData("text/Files")
    );
  },
  false
);

方案二

div contenteditable 替換textarea

1. 自動獲得焦點

編輯div contenteditable為true，然后利用Range和Selection 光標移動到最后的效果。

edit.addEventListener("click", () => {
  textarea.setAttribute("contenteditable", true);
  textarea.focus();
  const range = document.createRange();

  // range 包含的內(nèi)容
  range.selectNodeContents(textarea);

  // range.setStart(textarea.firstChild, 0);
  // range.setStart(textarea.lastChild, textarea.innerHTML.length);

  // 起始位置是否相同
  range.collapse(false);
  const sel = window.getSelection();
  
  // 將所有的區(qū)域都從選區(qū)中移除。
  sel.removeAllRanges();
  
  // 一個區(qū)域（Range）對象將被加入選區(qū)。
  sel.addRange(range);
});

2. 自適應(yīng)高度

div contenteditable 天然支持根據(jù)輸入來自適應(yīng)高度。

3. 粘貼圖片， 文本等

textarea.addEventListener("paste", function(e) {
  e.preventDefault();
  const clipboardData = e.clipboardData || e.originalEvent.clipboardData;
  // 獲取純文本
  let text = clipboardData.getData("text/plain");
  let file = clipboardData.getData("text/plain");
  // console.log(clipboardData.items, clipboardData.getData("text/Files"));

  // 插入img，可以做一些上傳圖片的一些操作
  insertImg(clipboardData);

  // 只輸入純文本
  document.execCommand("insertText", false, text);
});

看完上述內(nèi)容，你們對怎么在HTML5中使用 textarea實現(xiàn)高度自適應(yīng)有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱：怎么在HTML5中使用textarea實現(xiàn)高度自適應(yīng)-創(chuàng)新互聯(lián)
當前URL：http://muchs.cn/article24/djgdje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、電子商務(wù)、外貿(mào)建站、做網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)