问题:<input class="img-file" @change="uploadPic" name="file" id="file" type="file" accept="image/*" > 和 <textarea class="div-textarea" maxlength="200" placeholder="您的评价内容将会以匿名的形式展现(限200字)" v-model="content" required></textarea> 在一页面同时使用时,iphone手机上textarea 输入文字时,文字不能及时的显示在textarea 中,文字也不能及时删除(点击删除键时,文字不消失,鼠标跳过文字后移)。
问题图片展示:
![](https://img.haomeiwen.com/i13707244/d3ba3771da613525.jpg)
![](https://img.haomeiwen.com/i13707244/e42b78c307d15907.jpg)
原因:未知
解决办法:判断不是ios设备的时候不用textarea 输入框,用的div元素添加contenteditable="true"的属性来模拟textarea 输入框,但是用div元素添加contenteditable="true"的属性模拟的输入框,不能随时监听其值,不能添加placeholder提示语,当内容超出框的高度时,模拟框随字数增高自适应
![](https://img.haomeiwen.com/i13707244/076984b8d1d24d4c.jpg)
结果:不是很完美,产品勉强接受
结果图片:
![](https://img.haomeiwen.com/i13707244/0866563f064f9256.jpg)
![](https://img.haomeiwen.com/i13707244/e0795bf232a33007.jpg)
获得:如果模拟框设定一个高度不变的话,内容会溢出。所以在使用时务必设定min-height值,使其自适应,这是它的缺点,也是它的优点。
模拟框还有光标不听使唤的问题,暂未解决。
![](https://img.haomeiwen.com/i13707244/10e85ed6bb7a0e25.jpg)
![](https://img.haomeiwen.com/i13707244/a01a4c5ab90a4f17.jpg)
网友评论