uni-app textarea光标位置为什么在内容的前面
uni-app textarea光标位置为什么在内容的前面
示例代码：
<textarea @blur="poo" :focus="focus" v-if="isshow"></textarea>操作步骤：
textarea 先是隐藏不展示，然后点击按钮显示textarea 并且触发焦点
预期结果：
跟安卓一样，光标在内容后面
实际结果：
光变在内容前面
bug描述：
逻辑是 textarea 开始是隐藏起来，点击按钮显示出来并且动态触发焦点focus，如果里面有内容的话，触发焦点后光标在内容的前面，目前ios有这个问题，安卓没有，效果看附件
| 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC版本号 | 11 |
| HBuilderX | Alpha |
| HBuilderX版本号 | 3.8.12 |
| 手机系统 | iOS |
| 手机版本号 | iOS 15 |
| 手机厂商 | 苹果 |
| 手机机型 | 苹果11 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
6 回复
ios 复现了此问题，我看看怎么做个兼容。我用 sectionEnd 没成功，用暂存器实现了，你可以试一试
onClick() {
console.log(3)
this.textShow = !this.textShow
if (this.textShow) {
this.strFocus = true
let temp = this.str
this.str = ''
// 光标强制移动到最后
this.$nextTick(() => {
this.str = temp
this.$refs.textarea.focus()
}) }
回复 传播星球: 这是某个平台的特性，不是 api 或者组件的问题，目前考虑加入文档中做用户提示。是否在 uniapp 层面做处理，还需要评估，不确定对历史用户影响面有多大，不用的用户兼容方式不同
在 uni-app 中使用 textarea 组件时，如果光标位置出现在内容的前面，可能是由于以下原因之一：
1. value 或 v-model 绑定问题
- 如果你使用
v-model或value绑定数据，确保绑定的数据是字符串类型，并且初始值正确。 - 如果初始值为空字符串
""，光标会默认出现在最前面。 - 如果绑定的数据是
null或undefined，可能会导致光标位置异常。
解决方法：
<template>
<textarea v-model="inputValue" placeholder="请输入内容"></textarea>
</template>
<script>
export default {
data() {
return {
inputValue: "" // 确保初始值为空字符串
};
}
};
</script>2. placeholder 的影响
- 如果
textarea的内容为空，且设置了placeholder，光标可能会默认出现在最前面。 - 这是浏览器的默认行为，不是
uni-app的 Bug。
解决方法：
- 如果不需要
placeholder，可以移除它。 - 如果需要
placeholder，可以接受光标在最前面的行为，或者通过 JavaScript 动态设置光标位置。
3. 动态设置光标位置
- 如果你希望光标出现在内容的末尾，可以通过 JavaScript 动态设置光标位置。
解决方法：
<template>
<textarea ref="myTextarea" v-model="inputValue" placeholder="请输入内容"></textarea>
</template>
<script>
export default {
data() {
return {
inputValue: ""
};
},
methods: {
setCursorToEnd() {
const textarea = this.$refs.myTextarea;
if (textarea) {
textarea.focus();
const length = textarea.value.length;
textarea.setSelectionRange(length, length);
}
}
},
mounted() {
this.setCursorToEnd(); // 在组件加载后设置光标到末尾
}
};
</script>