uni-app 【报Bug】input type为number时 selection-start，selection-end属性不生效

uni-app 【报Bug】input type为number时 selection-start，selection-end属性不生效

产品分类

  • uniapp/App

PC开发环境

操作系统 版本号
Windows win10 1909

HBuilderX

类型 版本号
正式 3.1.22

手机系统

系统 版本号 厂商 机型
Android Android 10 小米

页面类型

  • vue

打包方式

  • 云端

项目创建方式

  • HBuilderX

示例代码

<input type="text" :value="val" :focus='focus' :selection-start='0' :selection-end='val.length' @focus="input_focus" @blur="input_blur" />  
<input type="number" :value="val2" :focus='focus2' :selection-start='0' :selection-end='val2.length' @focus="input_focus2" @blur="input_blur2" />

type='text’时selection-start，selection-end生效
type='number’时selection-start，selection-end不生效

操作步骤

<input type="text" :value="val" :focus='focus' :selection-start='0' :selection-end='val.length' @focus="input_focus" @blur="input_blur" />  
<input type="number" :value="val2" :focus='focus2' :selection-start='0' :selection-end='val2.length' @focus="input_focus2" @blur="input_blur2" />

type='text’时selection-start，selection-end生效
type='number’时selection-start，selection-end不生效

预期结果

<input type="text" :value="val" :focus='focus' :selection-start='0' :selection-end='val.length' @focus="input_focus" @blur="input_blur" />  
<input type="number" :value="val2" :focus='focus2' :selection-start='0' :selection-end='val2.length' @focus="input_focus2" @blur="input_blur2" />

type='text’时selection-start，selection-end生效
type='number’时selection-start，selection-end不生效

实际结果

<input type="text" :value="val" :focus='focus' :selection-start='0' :selection-end='val.length' @focus="input_focus" @blur="input_blur" />  
<input type="number" :value="val2" :focus='focus2' :selection-start='0' :selection-end='val2.length' @focus="input_focus2" @blur="input_blur2" />

type='text’时selection-start，selection-end生效
type='number’时selection-start，selection-end不生效

bug描述

<input type="text" :value="val" :focus='focus' :selection-start='0' :selection-end='val.length' @focus="input_focus" @blur="input_blur" />  
<input type="number" :value="val2" :focus='focus2' :selection-start='0' :selection-end='val2.length' @focus="input_focus2" @blur="input_blur2" />

type='text’时selection-start，selection-end生效
type='number’时selection-start，selection-end不生效


更多关于uni-app 【报Bug】input type为number时 selection-start，selection-end属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

底层不支持，需要修改为 text 类型

更多关于uni-app 【报Bug】input type为number时 selection-start，selection-end属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvue好像可以

尝试用v-model.number 试试？

这是一个已知的跨平台兼容性问题。在uni-app中，type="number"的input组件在App端（特别是Android平台）确实存在selection-start和selection-end属性不生效的情况。

问题原因：

  1. 平台差异：type="number"在不同平台底层实现不同。在App端，它可能使用原生数字键盘组件，而原生组件对文本选择的支持有限。
  2. 输入限制：数字输入框通常只允许输入数字字符，这可能导致文本选择逻辑与普通文本框不同。
  3. 浏览器/WebView限制：即使在内置WebView中，数字输入框的文本选择行为也可能受到限制。

临时解决方案：

  1. 使用type="text"配合输入验证：
<input type="text" 
       :value="val2" 
       :focus="focus2"
       :selection-start="0" 
       :selection-end="val2.length"
       @input="handleNumberInput"
       @focus="input_focus2" 
       @blur="input_blur2" />

methods: {
  handleNumberInput(e) {
    // 只允许输入数字
    this.val2 = e.detail.value.replace(/[^\d]/g, '')
  }
}
  1. 使用uniapp的input组件事件： 通过@focus事件后使用setTimeout延迟设置选择范围：
input_focus2() {
  this.focus2 = true
  this.$nextTick(() => {
    setTimeout(() => {
      // 尝试通过DOM操作设置选择范围
      const query = uni.createSelectorQuery()
      query.select('#numberInput').fields({
        node: true,
        size: true
      }, res => {
        if (res && res.node) {
          res.node.setSelectionRange(0, this.val2.length)
        }
      }).exec()
    }, 100)
  })
}
回到顶部