uni-app input 组件,type 为 digit 或 number 时,数字后紧跟小数点,光标会跑到最前面

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app input 组件,type 为 digit 或 number 时,数字后紧跟小数点,光标会跑到最前面

示例代码

<input type="digit" placeholder="输入价格" class="d-flex-item"/>

操作步骤

<input type="digit" placeholder="输入价格" class="d-flex-item"/>

预期结果

输入数字后正常输入小数点

实际结果

输入数字后不能正常输入小数点,同时光标跑到最前面去了

bug描述

input 组件,type 为 digit 或 number 时,数字后紧接着输入小数点,光标会跑到最前面。H5 和 APP 中都有这个问题

开发环境信息

项目创建方式 PC开发环境操作系统 操作系统版本号 HBuilderX类型 HBuilderX版本号 浏览器平台 浏览器版本
HBuilderX Windows 22H2 正式 4.15 Chrome 124.0.6367.92

9 回复

有录屏吗?发出来看下 我这没复现出你说的问题


回复 l***@126.com: 4.17

回复 爱豆豆: 我下了4.17版,确实没有这个问题了

我也遇到这个问题了,<uv-input v-model="form.otherCost"></uv-input> 一输入小数点 . 然后光标就自动定位到最左侧了。小数点也没输入上去

请问后来怎么解决的啊 我的4.29hbuilder 也有这个问题

按理说不应该还有这个问题啊,升级到最新版,4.36,应该没这个问题

在uni-app中,input 组件的 type 属性设置为 digitnumber 时,如果输入的数字后紧跟一个小数点,光标可能会异常地跑到最前面。这通常是由于输入法或组件本身的行为导致的。为了处理这种情况,可以通过监听输入事件(如 inputchange)并手动调整光标位置来解决。

以下是一个示例代码,展示了如何使用 JavaScript 和 uni-app 的 input 组件来避免这个问题:

<template>
  <view>
    <input
      type="number"
      v-model="inputValue"
      @input="handleInput"
      placeholder="请输入数字"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      lastCursorPosition: -1, // 记录上一次光标位置
    };
  },
  methods: {
    handleInput(event) {
      const input = event.target;
      const value = input.value;
      const cursorPosition = input.selectionStart;

      // 如果输入值以小数点结尾,且之前不是小数点或负号,则处理光标位置
      if (value.endsWith('.') && !/[\-.]$/.test(value.slice(0, -1))) {
        // 手动设置光标位置到小数点之后
        this.$nextTick(() => {
          input.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
        });
      } else {
        // 否则记录当前光标位置
        this.lastCursorPosition = cursorPosition;
      }

      // 更新 v-model 绑定的值
      this.inputValue = value;
    },
  },
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

在这个示例中,我们做了以下事情:

  1. 使用 v-model 绑定 input 组件的值到 inputValue
  2. 监听 input 事件,并在事件处理函数 handleInput 中获取输入值和光标位置。
  3. 检查输入值是否以小数点结尾,并且之前不是小数点或负号(这是为了避免连续输入多个小数点的情况)。
  4. 如果是上述情况,使用 setSelectionRange 方法在 $nextTick 中将光标位置设置到小数点之后。
  5. 如果不是上述情况,记录当前光标位置,以便下次使用。

这种方法可以在大多数情况下解决光标位置异常的问题。然而,由于不同设备和浏览器的输入法行为可能有所不同,可能需要根据实际情况进行微调。

回到顶部