Web移动端实现高度自适应多行文本

最新推荐文章于 2023-11-24 10:29:32 发布

VIP文章 two次元

最新推荐文章于 2023-11-24 10:29:32 发布

阅读量713

点赞数

本文链接：https://blog.csdn.net/sinat_38178730/article/details/105866074

版权

Web移动端实现高度自适应多行文本

初衷：最近刚好有H5项目需求是使用这么一个控件；如果H5仅运行在IOS的话，就没必要大费周章了，只要给dom元素增加contenteditable="true"属性，然后设置样式user-select:"auto"就可以了。这时就会有小伙伴发出疑问了，难道contenteditable属性在Android端就不支持了吗？其实不然，安卓也是支持这个属性的，但会逼死强迫症患者。至于是怎么一回事，下面让博主来揭晓：

问题图片来源（侵权删）：http://www.imooc.com/wenda/detail/411576

可以看到，在安卓端失焦时并不会自动消除光标水滴，而且点击了其他dom元素也不一定消除（博主的测试结果是时有时无），是不是逼死强迫症！！！！！！

效果图

在这里插入图片描述

一种不得体的解决办法（vue版本）

#利用vue的属性观察和表单控件的数据双向绑定，动态给textarea多行文本框调整高度

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		*{
   
			font-size: 16px;
			padding: 0;
		}
		#app{
   
			position: relative;
			height: auto;
			font: normal 16px auto;
			overflow: hidden;
		}
		.hide{
   
			padding: 0;
			margin: 0;
			word-break: break-all;
			border-bottom: 1px solid black;
			line-height: 21px;
			box-sizing: border-box;
			opacity: 0;
		}
		.hide{
   
			min-height: 22px;
			white-space:pre

最低0.47元/天解锁文章

two次元

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web移动端实现高度自适应多行文本

Web移动端实现高度自适应多行文本初衷：最近刚好有H5项目需求是使用这么一个控件；如果H5仅运行在IOS的话，就没必要大费周章了，只要给dom元素增加contenteditable="true"属性，然后设置样式user-select:"auto"就可以了。这时就会有小伙伴发出疑问了，难道contenteditable属性在Android端就不支持了吗？其实不然，安卓也是支持这个属性的，但会逼死...
复制链接

扫一扫