Vant+vue3
问题:含多行文本标签textarea且居右对齐时,在ios系统上,当输入为空格且空格后面无内容时,空格不显示光标未向后移位,只有继续填写空格才会出现。
如图:
需求:填写空格时光标实时向后移位
解决方案1:(可以解决实时空格问题但无法自动换行)
设置标签样式: white-space: pre !important;
<textarea style="white-space: pre"></textarea>
<van-field type="textarea" input-align="right" />
.van-field__control.van-field__control--right {
white-space: pre !important;
}
解决方案2:(解决实时空格问题且不影响自动换行)
处理输入值-在校验中替换输入的空格(' ')为HTML可识别的空白占位字符('\u00a0'即 )
<!-- 输入框 -->
<van-field
rows="1"
autosize
:formatter="formatter1"
type="textarea"
/>
<!-- 校验 -->
const formatter1 = (value) => {
return value.replace(' ', '\u2002');
};
拓:空格
空格 | 字符 | 16进制 | ios | Android | html |
不换行空格 |   | '\u00a0' | 不显示 | 不显示 | 正常显示 |
半角空格 | &ensp | '\u2002' | 正常显示 | 正常显示 | 正常显示 |
全角空格 | &emsp | '\u2003' | 正常显示 | 正常显示 | 正常显示 |