摘要:方法方法方法讓高度隨輸入自適應(yīng)文本框根據(jù)輸入內(nèi)容自適應(yīng)高度輸入框元素設(shè)置光標(biāo)與輸入框保持的距離默認(rèn)設(shè)置最大高度可選使用方法利用插件
方法1: jquery
$("textarea").each(function () { this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;"); }).on("input", function () { this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; });方法2: jquery + css
function setHeight(element) { $(element).css({"height":"auto","overflow-y":"hidden"}).height(element.scrollHeight); } $("textarea").each(function () { setHeight(this); }).on("input", function () { setHeight(this); });方法3: 讓textarea高度隨輸入自適應(yīng)
/** * 文本框根據(jù)輸入內(nèi)容自適應(yīng)高度 * @param {HTMLElement} 輸入框元素 * @param {Number} 設(shè)置光標(biāo)與輸入框保持的距離(默認(rèn)0) * @param {Number} 設(shè)置最大高度(可選) */ function autoTextarea(elem, extra, maxHeight) { extra = extra || 0; var isFirefox = !!document.getBoxObjectFor || "mozInnerScreenX" in window, isOpera = !!window.opera && !!window.opera.toString().indexOf("Opera"), addEvent = function (type, callback) { elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent("on" + type, callback); }, getStyle = elem.currentStyle ? function (name) { var val = elem.currentStyle[name]; if (name === "height" && val.search(/px/i) !== 1) { var rect = elem.getBoundingClientRect(); return rect.bottom - rect.top - parseFloat(getStyle("paddingTop")) - parseFloat(getStyle("paddingBottom")) + "px"; }; return val; } : function (name) { return getComputedStyle(elem, null)[name]; }, minHeight = parseFloat(getStyle("height")); elem.style.resize = "none"; var change = function () { var scrollTop, height, padding = 0, style = elem.style; if (elem._length === elem.value.length) return; elem._length = elem.value.length; if (!isFirefox && !isOpera) { padding = parseInt(getStyle("paddingTop")) + parseInt(getStyle("paddingBottom")); }; scrollTop = document.body.scrollTop || document.documentElement.scrollTop; elem.style.height = minHeight + "px"; if (elem.scrollHeight > minHeight) { if (maxHeight && elem.scrollHeight > maxHeight) { height = maxHeight - padding; style.overflowY = "auto"; } else { height = elem.scrollHeight - padding; style.overflowY = "hidden"; }; style.height = height + extra + "px"; scrollTop += parseInt(style.height) - elem.currHeight; document.body.scrollTop = scrollTop; document.documentElement.scrollTop = scrollTop; elem.currHeight = parseInt(style.height); }; }; addEvent("propertychange", change); addEvent("input", change); addEvent("focus", change); change(); }; // 使用 // var address = document.getElementById("address"); // autoTextarea(address);方法4: 利用插件 autosize
https://github.com/jackmoore/autosize
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/88249.html
摘要:高度自適應(yīng)文本域高度隨內(nèi)容自動變化,不會出現(xiàn)滾動條,可以有多種方法,除了用動態(tài)設(shè)置它的高度值以外還有其它更簡單的方法。還有一種方法,利用兄弟節(jié)點撐開父級高度,設(shè)置高度為即可。 textarea高度自適應(yīng) 文本域高度隨內(nèi)容自動變化,不會出現(xiàn)滾動條,可以有多種方法,除了用js動態(tài)設(shè)置它的高度值以外還有其它更簡單的方法。 可以用div標(biāo)簽?zāi)Mtextarea,將div的contentedit...
摘要:但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡單,當(dāng)用戶輸入的文本超過了文本框自身高度時不是會出現(xiàn)滾動條嘛,那么自然而然就能想到這個屬性。就應(yīng)該是用戶輸入文本的真實高度,至少超過文本框既定高度時是這樣。 文本框是很常見的輸入控件,我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了:需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適...
摘要:但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡單,當(dāng)用戶輸入的文本超過了文本框自身高度時不是會出現(xiàn)滾動條嘛,那么自然而然就能想到這個屬性。就應(yīng)該是用戶輸入文本的真實高度,至少超過文本框既定高度時是這樣。 文本框是很常見的輸入控件,我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了:需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適...
閱讀 1642·2023-04-25 18:27
閱讀 1393·2021-10-19 11:44
閱讀 570·2021-10-14 09:42
閱讀 2144·2021-10-11 10:59
閱讀 2777·2021-09-24 09:47
閱讀 1727·2019-08-30 14:20
閱讀 1157·2019-08-30 14:08
閱讀 735·2019-08-29 15:15