微信小程序表单填写时遇到的需求问题

问题：在填写表单时，我需要一行一行的输入，但是我一碰到空白区域我手机的键盘就会自动隐藏，非常影响使用体验，想问一下大家有没有遇到过这种问题的解决方案。

大概就是让我手机的键盘被吊起后不会因为点击空白区域自动隐藏。只有我手动点击输入完成或者是手动隐藏键盘时才隐藏键盘。

1. 在表单的空白区域添加一个不可见的input,当点击空白区域时,焦点会移到该input,键盘不会隐藏。

html
<view>
  <input placeholder="Name" />
  <input type="text" placeholder="Age" />
</view>
<input type="text" style="opacity: 0;" />  <!--  addon input  -->

2. 使用wx.onKeyboardComplete监听键盘收起事件,在事件回调中调用wx.showKeyboard再次弹出键盘。

js
Page({
  onKeyboardComplete() {
    wx.showKeyboard();  // 重新显示键盘
  }
})

以上两种方法的原理都是:当点击空白区域引起键盘隐藏时,立即触发操作让键盘重新显示,从而实现键盘常打开的效果。
完整的小程序代码如下:

html
<view>
  <input placeholder="Name" />
  <input type="text" placeholder="Age" /> 
</view>
<input type="text" style="opacity: 0;" />   

<view>
  <button bindtap="onSubmit">Submit</button>
</view>
js
Page({
  onKeyboardComplete() {
    wx.showKeyboard();  
  },
  
  onSubmit() {
    wx.hideKeyboard();  // 手动隐藏键盘
  }
})

这段代码会实现:

1. 点击任意空白区域,键盘不会隐藏,会重新显示
2. 点击Submit按钮后,手动隐藏键盘

将输入框的type设置成number 原先为： 改为： 这样做有个问题，弹出的只有数字框，不能再切换成英文，另外密码输入框暂时也不能为纯数字