微信小程序开发——文本框种输入手机号，点击获取验证码无反应的处理方法

异常描述：

以下图，输入手机号码以后，点击右侧的获取验证码，在开发工具是OK的，真机测试无反应：

页面编码跟H5差很少的，H5没出现这个问题，可是小程序就不同了。

异常分析：

页面结构层面，为了方便样式排版，手机号码输入框跟验证码输入框是同样宽的，获取验证码的层以绝对定位的方式固定在手机号码输入框的右边，以下：

对于H5来讲，这个并无什么影响，可是小程序中，这种排版，就不行了。

光标一旦进入文本框，在没有收起输入键盘或者点击文本框外其余地方的时候，文本框的聚焦状态是不会改变的。

也就是说上边这种排版种，若是输入完手机号码，直接去点击获取验证码，至关于直接点击输入框，是不会促发获取验证码的单击事件的。

那么，咱们就须要进行下代码改造了。

改造方案：

手机号码文本框添加 padding-right 样式，缩小文本框的输入区域，使获取验证码不在文本框的输入区域之上就能够了，以下：

如上，即不影响原来的排版样式，又解决了点击获取验证码无效的问题。

总结：

原来的排版方式在H5中是没问题的，虽然文本框的输入区域延伸到了获取验证码按钮所在的区域，可是手机号码文本框有长度限制，因此并不会出现内容显示杯遮盖的问题。可是严格来讲，最好仍是设置下padding-right的，毕竟文本框的点击输入和获取验证码的点击事件是相互独立且互斥的，能隔离开来就隔离开来。