H5适配ios - 输入空格光标未实时后移

最新推荐文章于 2023-07-27 13:35:38 发布

juzi_001

最新推荐文章于 2023-07-27 13:35:38 发布

阅读量351

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/juzi_001/article/details/130486982

版权

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
不换行空格	&nbsp	'\u00a0'	不显示	不显示	正常显示
半角空格	&ensp	'\u2002'	正常显示	正常显示	正常显示
全角空格	&emsp	'\u2003'	正常显示	正常显示	正常显示