Textarea 自动换行实现

seo靠我 2023-09-26 06:49:09

前端页面使用 Textarea 来输入内容时，可能会有这样的需求，要求用户在指定的位置处自动换行，指定位置处一般就是指定用户输入一定长度的字符。如下图所示：

而我们知道 Textarea 在默认情况下不SEO靠我会添加自动换行标记，也就是说 Textarea 如果不做处理，用户输入的始终是一行数据，保存到数据库中也是一行数据。这样在其他地方展示时就会有数据丢失的情况，本篇文章我们就来实现 Textarea 所SEO靠我见即所得的一个效果。

实现思路：

textarea 添加 cols 和 wrap 属性，其中 wrap 设置成 hard，表示上传到服务器的内容会自动添加换行符，外层使用 div 联动，优化 textarSEO靠我ea 的显示效果

实现代码：

<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"SEO靠我> </head> <body><div id="divTest" style="width: 100%;height:380px;border:1px solid bSEO靠我lue;overflow-y: auto;resize:both" ><textarea cols = "72" rows="24"wrap="hard" style="overflow:hiddenSEO靠我;resize:none;border:0px solid blue;display:block;" id="textarea"></textarea></div><script type="textSEO靠我/javascript">// 设置div高度var textareaWidth = document.getElementById("textarea").offsetHeight;documentSEO靠我.getElementById("divTest").style.height=textareaWidth;var address = document.getElementById("textareSEO靠我a"); autoTextarea(address); /** * 参考网上资料* 文本框根据输入内容自适应高度* @param {HTMLElement} 输入框元素* @paramSEO靠我 {Number} 设置光标与输入框保持的距离(默认0)* @param {Number} 设置最大高度(可选)*/function autoTextarea(elem, extra, maxHeigSEO靠我ht) {extra = extra || 0;// 浏览器判断var isFirefox = !!document.getBoxObjectFor || mozInnerScreenX in winSEO靠我dow, isOpera = !!window.opera && !!window.opera.toString().indexOf(Opera),addEvent = function (type,SEO靠我 callback) {elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent(SEO靠我on + type, callback);}, getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[SEO靠我name];if (name === height && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect();returSEO靠我n rect.bottom - rect.top - parseFloat(getStyle(paddingTop)) - parseFloat(getStyle(paddingBottom)) + SEO靠我px;};return val;} : function (name) {return getComputedStyle(elem, null)[name];},minHeight = parseFlSEO靠我oat(getStyle(height));elem.style.resize = none;var change = function () {var scrollTop, height,paddiSEO靠我ng = 0,style = elem.style;if (elem._length === elem.value.length) {return;}elem._length = elem.valueSEO靠我.length;if (!isFirefox && !isOpera) {padding = parseInt(getStyle(paddingTop)) + parseInt(getStyle(paSEO靠我ddingBottom));};scrollTop = document.body.scrollTop || document.documentElement.scrollTop;elem.styleSEO靠我.height = minHeight + px;if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maSEO靠我xHeight) {height = maxHeight - padding;style.overflowY = auto;} else {height = elem.scrollHeight - pSEO靠我adding;style.overflowY = hidden;};style.height = height + extra + px;scrollTop += parseInt(style.heiSEO靠我ght) - elem.currHeight;document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scroSEO靠我llTop;elem.currHeight = parseInt(style.height);};};addEvent(propertychange, change);addEvent(input, SEO靠我change);addEvent(focus, change);change(); };</script> </body> </html>

最后实现效果：SEO靠我

“SEO靠我”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题，请与我们联系删除或处理，客服邮箱：html5sh@163.com，稿件内容仅为传递更多信息之目的，不代表本网观点，亦不代表本网站赞同其观点或证实其内容的真实性。

上一篇：5 大分区管理器 - 最好的硬盘分区软件
下一篇：瑞利信道：从原理到实现

Textarea 自动换行实现

最新发布