HTML5 textarea高度自適應(yīng)的兩種方案
我要評(píng)論閱讀全文你將獲得以下解決方案。
- 點(diǎn)擊長(zhǎng)文本編輯textarea，自動(dòng)獲得焦點(diǎn)
- 隨著輸入值自動(dòng)伸縮高度
- 可復(fù)制添加信息
- 可粘貼文本
- 可粘貼圖片
以下實(shí)例代碼執(zhí)行環(huán)境為Chrome80
方案一
HTML5 Textarea 元素
1. 自動(dòng)獲得焦點(diǎn)
點(diǎn)擊編輯自動(dòng)獲得焦點(diǎn)后光標(biāo)跳轉(zhuǎn)到了最前面，why?
查文檔 MDN，textarea元素存在selectionEnd和selectionStart的屬性用來(lái)表示選中的文本開(kāi)始位置和結(jié)束位置，DOM接口實(shí)例是 HTMLTextAreaElement， 它具有 setSelectionRange 方法，用來(lái)選中輸入框中的文本，用法：TextAreaElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);
那么我們只要做到selectionStart === selectionEnd === value.length , 這樣光標(biāo)就選中到最末尾。
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)高度
當(dāng)不設(shè)置高度時(shí)換行會(huì)出現(xiàn)滾動(dòng)條，所以只要讓textarea滾動(dòng)條消失，讓其height = scrollHieght, 那么如何監(jiān)聽(tīng)textarea的變化，則需要input事件，讓textarea高度動(dòng)態(tài)等于它的scrollHeight即可，代碼如下：
textarea.addEventListener("input", function() {
this.style.height = `${this.scrollHeight}px`;
});
為什么每次輸入都會(huì)使得高度增加(每次增加4px)，經(jīng)過(guò)測(cè)試Safari同樣也是這個(gè)效果，Firefox符合預(yù)期高度不異常增加，查看Chrome控制臺(tái)發(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值，輸入后高度就不增加了？（未找到合理的解釋?zhuān)瑲g迎留言討論解答）
但是刪除文本的情況下height并未能自動(dòng)縮放，分析原因， 當(dāng)刪除文本換行的時(shí)候scrollHeight的大小并未發(fā)生改變，scrollHeight作為只讀屬性( MDN-文檔)，如何讓scrollHeight高度重新計(jì)算哪？只有改變高度，于是：
textarea.addEventListener("input", function(e) {
this.style.height = "inherit";
this.style.height = `${this.scrollHeight}px`;
});
到此高度自適應(yīng)輸入內(nèi)容完成，但是每次換行的閃動(dòng)很難受，transition走一波，
textarea {
overflow: hidden; // 防止換行出現(xiàn)滾動(dòng)條閃動(dòng)
padding: 5px 10px;
box-sizing: border-box;
transition: all 0.2s linear;
}
結(jié)果transition并沒(méi)效果，原因height初始值或者參考值必須為數(shù)值過(guò)渡動(dòng)畫(huà)才會(huì)生效，height設(shè)置為auto或者inherit動(dòng)畫(huà)不會(huì)生效， 所以折中的辦法就是當(dāng)刪除的時(shí)候重新重置高度，輸入時(shí)不需要重置，這樣輸入時(shí)動(dòng)畫(huà)生效， 刪除沒(méi)有動(dòng)畫(huà)， 暫時(shí)沒(méi)想到更好的辦法。
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只能輸入文本，無(wú)法實(shí)現(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. 自動(dòng)獲得焦點(diǎn)
編輯div contenteditable為true，然后利用Range和Selection 光標(biāo)移動(dòng)到最后的效果。
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();
// 一個(gè)區(qū)域（Range）對(duì)象將被加入選區(qū)。
sel.addRange(range);
});
2. 自適應(yīng)高度
div contenteditable 天然支持根據(jù)輸入來(lái)自適應(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);
});
此方法可以限定只能上傳文本或者圖片。
歡迎留言討論其他textarea高度自適應(yīng)的方案。
到此這篇關(guān)于HTML5 textarea高度自適應(yīng)的兩種方案的文章就介紹到這了,更多相關(guān)textarea高度自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML頁(yè)面自適應(yīng)寬度的table(表格)
這篇文章主要介紹了HTML頁(yè)面自適應(yīng)寬度的table(表格),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-06-16- 這篇文章主要介紹了HTML5 body設(shè)置自適應(yīng)全屏,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-07
html5移動(dòng)端自適應(yīng)布局的實(shí)現(xiàn)
這篇文章主要介紹了html5移動(dòng)端自適應(yīng)布局的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-04-15關(guān)于html選擇框創(chuàng)建占位符的問(wèn)題
今天給大家普及在html選擇框創(chuàng)建占位符的問(wèn)題，文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-06-09