uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入
uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入
类别 | 信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Windows |
PC版本号 | win11 |
HBuilderX类型 | 正式 |
HBuilderX版本 | 4.15 |
手机系统 | Android |
手机版本号 | Android 14 |
手机厂商 | 华为 |
手机机型 | mate60 pro |
页面类型 | vue |
Vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
示例代码:
<uni-easyinput type="number" v-model="this.boxWeight"></uni-easyinput>
操作步骤:
uni-easyinput type = number 第一次输入小数点后光标会自动跳回到输入框的最前方,并且点不会被输入
预期结果:
uni-easyinput type = number 第一次输入小数点后光标会自动跳回到输入框的最前方,并且点不会被输入
实际结果:
uni-easyinput type = number 第一次输入小数点后光标会自动跳回到输入框的最前方,并且点不会被输入
更多关于uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于uni-app uni-easyinput type=number 报Bug:第一次输入小数点后光标自动跳回输入框最前方,且小数点不被输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html
非常感谢
回复 3***@qq.com: 您好,请问您是参考https://ask.dcloud.net.cn/question/190763这个解决的吗
在 uni-app
中使用 uni-easyinput
组件时,如果 type
设置为 number
,并且遇到输入小数点时光标跳回输入框最前方且小数点不被输入的问题,这可能是由于组件的内部处理逻辑导致的。以下是一些可能的解决方案和排查步骤:
1. 检查 uni-easyinput
版本
确保你使用的是最新版本的 uni-easyinput
组件。开发者可能已经修复了这个 Bug,更新到最新版本可能会解决问题。
2. 使用 input
事件手动处理输入
你可以监听 input
事件,并在事件处理函数中手动处理输入内容,确保小数点的正确输入。
<template>
<uni-easyinput
type="number"
v-model="inputValue"
@input="handleInput"
/>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput(value) {
// 手动处理输入内容,确保小数点正确输入
this.inputValue = value;
}
}
};
</script>
3. 使用 text
类型并手动校验
如果 type="number"
导致问题,你可以使用 type="text"
,并通过正则表达式或自定义校验逻辑来确保输入的是合法的数字。
<template>
<uni-easyinput
type="text"
v-model="inputValue"
@input="handleInput"
/>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleInput(value) {
// 使用正则表达式确保输入的是合法的数字
if (/^\d*\.?\d*$/.test(value)) {
this.inputValue = value;
}
}
}
};
</script>