关于文字输入面板遮住部分输入框的解决方法

芒果千层

最近遇到这个问题， 自己研究半天不透，可能是学艺不精，未得深邃吧，论坛找了半天也没找到答案，倒是看到不少跟我一样的人在问，不过皇天不负有心人，作为一个勤劳的小蜜蜂，我在花粉俱乐部找到了一篇帖子搞定了，顺手转给大家，好东西大家分享嘛

【异常现象】在开发快应用过程中，有时点击输入框，弹出输入面板时，发现输入面板遮住一部分输入框，现象如下图所示。 【问题分析】 一般开发者对于输入框的布局如下图红框所示，也就是说只是红框部分作为文本输入框。 Android 系统在弹出输入法面板时自动顶到文本编辑框，所以当弹出输入法面板时，文本输入框被顶起来。文本输入框（红框）下面的部分被输入面板遮住。我们之所以感觉文本框被遮挡了，是因为我们潜意识认为下图绿框标识的才是完整的文本输入框。 【解决方案】 开发者将文本框放大到整个区域（如上图绿框中），真正的文本输入框区域通过padding属性来设置，如下图所示。 【示例代码】

1. <template>
2. <!-- template里只能有一个根节点 -->
3. <div class="container" >
4. <div style="width:100%;height:100%;" >
5. <!—用来撑起来输入框上面的内容区域，保证输入框靠屏幕底部，这个实现是用作输入框放到屏幕最底部的情况，不是解决问题必须实现。 -->
6. </div>
8. <!—视觉上的整个输入框，固定高度、宽度100%、灰色背景 -->
9. <div style="background-color: #bcc0bc;width:100%;height:70px">
10. <!— 左侧输入框区域 -->
11. <stack >
12. <!— 真正的输入区域白色背景 -->
13. <div style="background-color: #fafdfa;width:100%;height:50px;margin-left:20px;margin-top:10px;margin-bottom:10px;margin-right:20px"></div>
14. <!— 文本输入框 -->
15. <input type="text" style="width:100%;height:70px;padding-left:20px;padding-top:10px;padding-bottom:10px;padding-right:20px"></input>
16. </stack>
17. <!— 右侧发送按钮区域，固定宽度和高度 -->
18. <div style="width:200px;height:70px">
19. <input type="button" class="input-button color-2" style="width:150px;height:50px;margin-left:20px;margin-top:10px;margin-bottom:10px;margin-right:20px;" value="发送"></input>
20. </div>
21. </div>
22. </div>
23. </template>

复制代码

修改后实现的效果如下图所示： 不要感谢我，要感谢就感谢这位作者大大吧 【案例】文字输入面板遮住部分输入框 https://club.huawei.com/thread-15739928-1-1.html (出处:花粉俱乐部)