uni-app nvue页面使用getSelectionRange报错

uni-app nvue页面使用getSelectionRange报错

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：Alpha

HBuilderX版本号：3.0.7

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：8note

页面类型：nvue

打包方式：云端

示例代码：

```javascript
this.$refs.aaaa.getSelectionRange((res) => {  
    console.log(res)  
})  

<textarea  ref="aaaa" />
<view>点击</view>

操作步骤：

...

预期结果： 要么可以正常获取到光标位置，要么获取到选区位置

实际结果： 全部bug

bug描述： 因为textarea获取的光标位置是错误的，所有暂时想到的是通过获取选区来判断焦点位置，文档说明不能使用uni.getSelectedTextRange，但是可以使用weex的getSelectionRange，按weex写法 this.$refs.aaaa.getSelectionRange((res) => { console.log(res) }) 但实际报错； eportJSException >>>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: _this3.$refs.aaaa.getSelectionRange is not a function 15:40:38.742 [JS Framework] Failed to execute the callback function: 15:40:38.763 TypeError: _this3.$refs.aaaa.getSelectionRange is not a function


更多关于uni-app nvue页面使用getSelectionRange报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

getSelectionRange并不是uniapp官方支持的API

更多关于uni-app nvue页面使用getSelectionRange报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


但是文档上写可以使用weex的，按weex的结果用不了

回复 突然好想你: 我们后续会支持

回复 DCloud_Android_ST: 现在还是没支持，如暂未支持建议把文档内容去掉

在nvue页面中，getSelectionRange方法确实存在兼容性问题。根据你的描述，这是一个已知的nvue组件限制。以下是关键点：

  1. 在nvue中，textarea组件是基于weex原生实现的，但getSelectionRange方法并未完全兼容

  2. 替代方案建议：

  • 使用input事件监听内容变化
  • 通过selectionchange事件获取选区（需要Android 7+支持）
  • 改用vue页面而非nvue页面
  1. 当前可行的临时解决方案：
this.$refs.aaaa.addEventListener('input', (e) => {
    // 通过事件对象获取部分信息
    console.log(e.value)
})
回到顶部