uni-app 使用type为number的input弹出软键盘为符号键盘

uni-app 使用type为number的input弹出软键盘为符号键盘

示例代码：

<input  type="number" />

操作步骤：

  • 第一次使用type为number的input弹出软键盘

预期结果：

  • 弹出数字键盘

实际结果：

  • 弹出数字键盘中的更多

bug描述：

  • 弹出的软键盘是符号键盘，而非数字键盘

| 项目信息         | 详情           |
|------------------|----------------|
| 产品分类         | uniapp/App     |
| PC开发环境       | Windows        |
| PC开发环境版本   | win7           |
| HBuilderX类型    | 正式           |
| HBuilderX版本    | 3.1.19         |
| 手机系统         | iOS            |
| 手机系统版本      | iOS 13.1       |
| 手机厂商         | 苹果           |
| 手机机型         | iPhone12       |
| 页面类型         | vue            |
| 打包方式         | 云端           |
| 项目创建方式     | HBuilderX      |

更多关于uni-app 使用type为number的input弹出软键盘为符号键盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

使用的是什么键盘？可否提供一份视频、示例？

更多关于uni-app 使用type为number的input弹出软键盘为符号键盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就ios系统的默认键盘 第一次聚焦之后 弹出的键盘是 数字键盘中的符号键盘

就是弹出的数字键盘 默认选中了更多

弹出的键盘是长这样的

使用Safari浏览器访问了只有一个input标签的html，九宫格键盘第一次弹出确实是符号键盘，猜测可能是Safari的bug

回复 DCloud_UNI_LXH: 但是APP也会

回复 DCloud_UNI_LXH: APP-VUE的情况下也会这样

回复 yuyuko: 像是苹果键盘的问题

这是一个在iOS设备上常见的软键盘兼容性问题。当在uni-app中使用type="number"的input组件时，iOS系统可能会优先显示符号键盘而非纯数字键盘。

解决方案：

  1. 使用inputmode属性（推荐）：
<input type="text" inputmode="numeric" pattern="[0-9]*" />
  1. 使用uni-app的input组件：
<uni-easyinput type="number" />
  1. 使用uni-app的键盘配置：
<input type="number" @focus="handleFocus" />

<script>
export default {
  methods: {
    handleFocus() {
      // 强制数字键盘
      uni.hideKeyboard();
      setTimeout(() => {
        // 触发数字键盘
      }, 100);
    }
  }
}
</script>
  1. 使用原生input事件处理：
// 限制只能输入数字
onInput(e) {
  let value = e.detail.value.replace(/[^\d]/g, '');
  this.value = value;
}
回到顶部