uni-app HBuilder X 4.14 input 组件 type="digit" 时输入数字后无法输入小数点
uni-app HBuilder X 4.14 input 组件 type=“digit” 时输入数字后无法输入小数点
测试过的手机：
H5 iPhone
示例代码：
<template>
<view class="content">
<view class="text-area">
<!--无法输入小数点-->
<input placeholder="digit" type="digit"/>
</view>
</view>
</template>
<script>
</script>
<style>
</style>
操作步骤：
<template>
<view class="content">
<view class="text-area">
<!--无法输入小数点-->
<input placeholder="digit" type="digit"/>
</view>
</view>
</template>
<script>
</script>
<style>
</style>
预期结果：
能输入小数点
实际结果：
不能输入小数点，而且输入小数点的时候，输入框焦点自动移动到了数字最前面
bug描述：
HBilder X 4.14 input 组件 type=“digit” 的时候，输入数字后无法输入小数点 。而且输入小数点的时候，自动焦点跑到数字的最前面了。
在mac和Windows不同电脑主机都能复现。在H5和App也会复现
在HBuildX4.14的正式版和开发版都存在这个问题，影响范围比较大，请尽快修复
| 项目 | 信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | macOs Catalina |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 4.14 |
| 手机系统 | 全部 |
| 手机厂商 | 华为 |
| 页面类型 | vue |
| vue版本 | vue3 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于uni-app HBuilder X 4.14 input 组件 type="digit" 时输入数字后无法输入小数点的实战教程也可以访问 https://www.itying.com/category-93-b0.html
HBuilderX 4.17 alpha 已修复。
更多关于uni-app HBuilder X 4.14 input 组件 type="digit" 时输入数字后无法输入小数点的实战教程也可以访问 https://www.itying.com/category-93-b0.html
临时解决方案
web
替换 uni-h5.es.js 到 hx 根目录\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-h5\dist 重新运行
app
替换 uni-h5.es.js 到 hx 根目录\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-app-plus\dist 重新运行
我是使用的HBuilder运行的cli创建的项目 vue3.0 cli 5.0.8 hbuilder4.36 在hbuilder中创建的input正常。但是在我项目里创建的不正常
升级前版本："@dcloudio/uni-app": “3.0.0-4000820240401001”
升级后版本："@dcloudio/uni-app": “3.0.0-4020420240722002”
升级到最新后，发现bug，升级前无此问题
如果input设置
type=“digit”
绑定值如果是null，报错：
main.ts?t=1722478657119:20 TypeError: Cannot read properties of null (reading ‘toLocaleString’)
at useCache (uni-h5.es.js:9799:60)
at setup (uni-h5.es.js:9847:17)
at callWithErrorHandling (vue.runtime.esm.js:1381:19)
at setupStatefulComponent (vue.runtime.esm.js:8930:25)
at setupComponent (vue.runtime.esm.js:8891:36)
at mountComponent (vue.runtime.esm.js:7218:7)
at processComponent (vue.runtime.esm.js:7184:9)
at patch (vue.runtime.esm.js:6650:11)
at mountChildren (vue.runtime.esm.js:6898:7)
at processFragment (vue.runtime.esm.js:7114:7)
在 uni-app 中使用 HBuilder X 4.14 时，如果你在 input 组件中设置了 type="digit"，输入数字后无法输入小数点，这可能是由于 type="digit" 的限制导致的。
type="digit" 通常用于限制用户只能输入数字，但在某些平台或版本中，它可能会限制输入其他字符，包括小数点（.）。为了允许用户输入小数，你可以考虑以下几种解决方案：
解决方案 1: 使用 type="number"
将 type="digit" 改为 type="number"，这样可以允许用户输入数字和小数点。
<input type="number" placeholder="请输入数字" />
解决方案 2: 使用 type="text" 并自定义验证
如果你需要更复杂的输入验证，可以使用 type="text"，然后通过 JavaScript 或 uni-app 的事件处理函数来验证输入内容。
<input type="text" placeholder="请输入数字" @input="handleInput" />
export default {
methods: {
handleInput(event) {
const value = event.detail.value;
// 自定义验证逻辑，确保输入的是数字或小数点
if (!/^\d*\.?\d*$/.test(value)) {
// 如果不符合要求，可以清空输入或提示用户
event.detail.value = value.replace(/[^\d.]/g, '');
}
}
}
}
解决方案 3: 使用 inputmode 属性
虽然 inputmode 属性在现代浏览器中支持较好，但在某些环境中可能不支持。你可以尝试使用 inputmode="decimal" 来提示设备键盘显示数字和小数点。
<input type="text" inputmode="decimal" placeholder="请输入数字" />
解决方案 4: 使用 uni-app 的 input 组件
如果你使用的是 uni-app 的自定义组件，可以尝试使用 uni-input 组件，并设置 type="number" 或 type="digit"，并确保其行为符合预期。
<uni-input type="number" placeholder="请输入数字" />