问题叙述
- 将textarea标签作为组件，且placeholder内容长度超过一行。
- 在文本区域输入文字，又把文字删除后，placeholder被部分隐藏，但是把ios键盘收起后，placeholder的内容又完全显示。
- 问题涉及区域：ios、Safari
- 相同问题：
https://segmentfault.com/q/1010000018649818
情况图列：
情况1: text-area与placeholder的font-size、line-height相同。
情况2: text-area的font-size、line-height不变，placeholder的font-size、line-height设小。
| 步骤 | 情况1 | 情况2 |
|---|---|---|
| 打开文本输入框(起始状态) | ||
| 在文本区域输入内容 | ||
| 删除输入的内容后，placeholder被截断，收起ios键盘后与起始状态一致 |
注意: 删除输入内容且未收起ios键盘时，placeholder是被截断，其截断的高度为text-area的line-height，而不是placeholder只显示一行。
解决方案
对textarea添加input事件监听，当textarea的value值为空时，通过改变textarea的样式，让textarea重新渲染。
相关代码
<template>
<textarea
autofocus
:class="['text-area', isTextEmpty ? 'plain' : '']"
:placeholder="textAreaPlaceholder"
v-model="value"
@input = "inputFunc"
></textarea>
</template>
<script>
export default {
props: {
textAreaPlaceholder: {
type: String
},
},
data() {
return {
value: '',
isTextEmpty: false
};
},
methods: {
inputFunc() {
let ua = navigator.userAgent.toLowerCase();
let isIOS = /iphone|ipod|ipad/i.test(ua);
let isSafari = /safari/i.test(ua);
if (!isIOS && !isSafari) {
return;
}
// 当文本区域内容为空，通过更改样式使其重新渲染
this.isTextEmpty = !this.value;
},
}
}
</script>
<style lang="less">
.text-area {
box-sizing: border-box;
width: 6.884rem;
height: 3.2rem;
margin: 0 auto;
padding: 0.2264rem 0.2536rem;
border: 1px solid #f29b76;
border-radius: 0.0905rem;
background: #fff;
overflow-y: scroll;
resize: none;
font-size: 0.3261rem;
line-height: 0.3804rem;
&.plain {
// 随便更改text-area中的某个样式，微调。
padding: 0.2263rem 0.2536rem;
}
}
</style>
