将textarea实现自适应高度及IE下滚动条不出现的bug

Posted 行走的JS

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将textarea实现自适应高度及IE下滚动条不出现的bug相关的知识,希望对你有一定的参考价值。

1.<el-table-column label="备注" width="180">

  <template scope="scope">
<el-input
class="remark"
:readonly="Todisabled"
type="textarea"
:rows="calcRows(scope.row.remarks)"
v-model="scope.row.remarks"
placeholder="请输入内容">
</el-input>
</template>
</el-table-column>
2.element-ui的<el-textarea>文本框是不能自适应高度的,且如果将其设为只读disabled在IE9+下是不出现滚动条的,
这样会给使用人员造成误解,下面就如何将textarea设为自适应高度做以下解读:

3.解决IE9+下不出现滚动条的问题:

将disabled改为readonly,textarea的disabled在IE下是显示不出滚动条的,因此要想实现此功能,将disabled改为readonly,然后再去改变readonly下的样式;

textarea[readonly]{//所有disabled改为readonly
background-color: #eef1f6;
cursor: not-allowed;
}

4.解决高度不能自适应的问题:

如果不想定高,超出部分隐藏,而是要有多少内容显示多少,可以借助element-ui的<el-textarea>的rows属性,输入框行数,只对 type="textarea" 有效,为number,

这里想要实现自动变换高度,就应该将rows绑定为一个变量,这里:rows="calcRows(scope.row.remarks)",calcRows为vue,computed(){}里的一个计算属性,

calcRows(text) {
if (!text) return 2
const arr = text.match(/\n/g)
return arr ? arr.length + 2 : 2
},
将calcRows绑定在rows上,即可实现文本域高度自适应。

以上是关于将textarea实现自适应高度及IE下滚动条不出现的bug的主要内容,如果未能解决你的问题,请参考以下文章

如何让textarea的高度自适应

textarea如何实现高度自适应?

textarea高度自适应问题

div模拟textarea自适应高度

textarea高度自适应(可设置最大高度)

如何让textarea的高度自适应