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

异常描述：

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

页面编码跟H5差不多的，H5没出现这个问题，但是小程序就不一样了。

异常分析：

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

对于H5来说，这个并没有什么影响，但是小程序中，这种排版，就不行了。

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

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

那么，我们就需要进行下代码改造了。

改造方案：

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

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

总结：

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