前端–换行，高度自适应
最近项目遇到了一个小不小的问题。输入框必须自动换行，高度必须自适应。我尝试了几种方法。
1.input输入，输入不能换行，网上查询说css设置为word-break:break-all；自动换行:断字；也无效。
2 . div set content editable = ”真”属性，该方法可以实现输入内容的自动换行并适应高度，但项目需要光标从边缘输入。我试过text-align: right，无效。所以这种方式也行不通。
3.textarea，文本输入框。想想这个。文本输入框可以自动换行，但是高度是固定的。我还是没解决。百度了一下，终于找到了解决办法。
最后，我在占位符提示文本上遇到了一个光标。解决方案:#
textarea::-WebKit-input-placeholder { padding-right:4px；}
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta charset = & # 8221utf-8 ″& gt
& lttitle & gt& lt/title >
& ltstyle & gt
#textarea {
显示:块；
边距:0自动；
溢出:隐藏；
宽度:550px
字体大小:14px
高度:18px
行高:24px
填充:2px
文本对齐:右对齐；
}
文本区域{
大纲:0无；
边框颜色:rgba(82，168，236，0.8)；
box-shadow: inset 0 1px 3px rgba(0，0，0，0.1)，0 0 8px rgba(82，168，236，0.6)；
}
& lt/style >
& lt/head >
& ltbody & gt
& lttextarea id = & # 8221textarea & # 8221placeholder = & # 8221回复”& gt& lt/textarea >
& lt脚本& gt
var autoTextarea = function (elem，extra，***xHeight) {
extra = extra | | 0；
var isFirefox =！！document . getboxobjectfor | | ‘mozInnerScreenX & # 8217在窗口中，
isOpera =！！window.opera & amp& amp！！window.opera.toString()。index of(‘歌剧’),
addEvent = function(类型，回调){
elem.addEventListener？
elem.addEventListener(type，callback，false):
elem . attach event(‘关于’+类型，回调)；
},
getStyle = elem.currentStyle？功能(名称){
var val = elem . current style[name]；
if(name = = = ‘身高’& amp& ampval.search(/px/i)！== 1) {
var rect = elem . getboundingclientrect()；
return rect.bottom & # 8211rect.top & # 8211
parse float(get style(‘paddingTop & # 8217)) –
parse float(get style(‘paddingBottom & # 8217)) + ‘px ’
};
返回val
}:函数(名称){
返回getComputedStyle(elem，null)[name]；
},
min height = parse float(get style(‘身高’));
elem . style . resize = ‘无’；
var change = function () {
可变滚动条，高度，
填充= 0，
style = elem.style
如果(elem。_length === elem.value.length)返回；
elem。_ length = elem . value . length；
如果(！isFirefox & amp& amp！isOpera) {
padding = parse int(get style(‘paddingTop & # 8217))+parse int(get style(‘paddingBottom & # 8217));
};
scroll top = document . body . scroll top | | document . document element . scroll top；
elem . style . height = min height+‘px ’
if(elem . scroll height >minHeight) {
if(***x height && ampelem.scrollHeight & gt***xHeight) {
height = ***xHeight & # 8211填充；
style.overflowY = & # 8216auto ’
}否则{
height = elem . scroll height –填充；
style.overflowY = & # 8216隐藏’；
};
style . height = height+extra+‘px ’
scroll top+= parse int(style . height)–elem.currHeight
document . body . scroll top = scroll top；
document . document element . scroll top = scroll top；
elem . curr height = parse int(style . height)；
};
};
addEvent(‘propertychange & # 8217，改变)；
addEvent(‘输入’，改变)；
addEvent(‘焦点’，改变)；
change()；
};
& lt/script >
& lt脚本& gt
var text = document . getelementbyid(“textarea & # 8221);
autoTextarea(文本)；//调用
& lt/script >
& lt/body >
& lt/html >
本文来自无言温柔天然对象投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/647967.html
微信扫一扫 
