uni-app input 组件,type 为 digit 或 number 时,数字后紧跟小数点,光标会跑到最前面
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 回复
有录屏吗?发出来看下 我这没复现出你说的问题
https://digital-test.xbbqsc.com/bug.mp4 hbuilder 的版本是4.15吗
回复 l***@126.com: 4.17
回复 爱豆豆: 我下了4.17版,确实没有这个问题了
请问后来怎么解决的啊 我的4.29hbuilder
也有这个问题
按理说不应该还有这个问题啊,升级到最新版,4.36,应该没这个问题
4.45 还有的
在uni-app中,input
组件的 type
属性设置为 digit
或 number
时,如果输入的数字后紧跟一个小数点,光标可能会异常地跑到最前面。这通常是由于输入法或组件本身的行为导致的。为了处理这种情况,可以通过监听输入事件(如 input
或 change
)并手动调整光标位置来解决。
以下是一个示例代码,展示了如何使用 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>
在这个示例中,我们做了以下事情:
- 使用
v-model
绑定input
组件的值到inputValue
。 - 监听
input
事件,并在事件处理函数handleInput
中获取输入值和光标位置。 - 检查输入值是否以小数点结尾,并且之前不是小数点或负号(这是为了避免连续输入多个小数点的情况)。
- 如果是上述情况,使用
setSelectionRange
方法在$nextTick
中将光标位置设置到小数点之后。 - 如果不是上述情况,记录当前光标位置,以便下次使用。
这种方法可以在大多数情况下解决光标位置异常的问题。然而,由于不同设备和浏览器的输入法行为可能有所不同,可能需要根据实际情况进行微调。