请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

0
回复
1930
查看
[复制链接]

1

主题

3

帖子

20

积分

 楼主| 2018-8-6 19:40:45 显示全部楼层 |阅读模式
最近遇到这个问题, 自己研究半天不透,可能是学艺不精,未得深邃吧,论坛找了半天也没找到答案,倒是看到不少跟我一样的人在问,不过皇天不负有心人,作为一个勤劳的小蜜蜂,我在花粉俱乐部找到了一篇帖子搞定了,顺手转给大家,好东西大家分享嘛
【异常现象】在开发快应用过程中,有时点击输入框,弹出输入面板时,发现输入面板遮住一部分输入框,现象如下图所示。 12.png 【问题分析】 一般开发者对于输入框的布局如下图红框所示,也就是说只是红框部分作为文本输入框。 2.png Android 系统在弹出输入法面板时自动顶到文本编辑框,所以当弹出输入法面板时,文本输入框被顶起来。文本输入框(红框)下面的部分被输入面板遮住。我们之所以感觉文本框被遮挡了,是因为我们潜意识认为下图绿框标识的才是完整的文本输入框。 3.png 【解决方案】 开发者将文本框放大到整个区域(如上图绿框中),真正的文本输入框区域通过padding属性来设置,如下图所示。 4.png 【示例代码】
  1. <template>
  2. <!-- template里只能有一个根节点 -->
  3. <div class="container" >
  4. <div style="width:100%;height:100%;" >
  5. <!—用来撑起来输入框上面的内容区域,保证输入框靠屏幕底部,这个实现是用作输入框放到屏幕最底部的情况,不是解决问题必须实现。 -->
  6. </div>
  7. <!—视觉上的整个输入框,固定高度、宽度100%、灰色背景 -->
  8. <div style="background-color: #bcc0bc;width:100%;height:70px">
  9. <!— 左侧输入框区域 -->
  10. <stack >
  11. <!— 真正的输入区域白色背景 -->
  12. <div style="background-color: #fafdfa;width:100%;height:50px;margin-left:20px;margin-top:10px;margin-bottom:10px;margin-right:20px"></div>
  13. <!— 文本输入框 -->
  14. <input type="text" style="width:100%;height:70px;padding-left:20px;padding-top:10px;padding-bottom:10px;padding-right:20px"></input>
  15. </stack>
  16. <!— 右侧发送按钮区域,固定宽度和高度 -->
  17. <div style="width:200px;height:70px">
  18. <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>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
复制代码
修改后实现的效果如下图所示: 5.png 不要感谢我,要感谢就感谢这位作者大大吧 【案例】文字输入面板遮住部分输入框 https://club.huawei.com/thread-15739928-1-1.html (出处:花粉俱乐部)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册