苏禾然
苏禾然
  • 发布:2016-05-24 10:36
  • 更新:2018-08-30 14:20
  • 阅读:3303

使用mui-bar-tab固定在底部的输入框,在iOS上获取焦点错位

分类:MUI

我是要实现聊天功能,当获取焦点的时候,输入框显示没太大问题,如下图:

获取焦点,发送之前

当点击发送的时候,输入框就错位了,如下图

点击发送按钮

css代码

      body>.mui-bar {  
        box-shadow: 0 0 1px transparent;  
      }  
     .footer-right {  
        position: absolute;  
        width: 50px;  
        height: 50px;  
        right: 0px;  
        bottom: 0px;  
        text-align: center;  
        vertical-align: middle;  
        display: inline-block;  
      }  
        
      #send-btn {  
        width: 100% !important;  
        height: 80% !important;  
        color: red;  
        margin-top: 5px;  
      }  
        
      .footer-center {  
        position: absolute;  
        left: 0px;  
        width: calc(100% - 50px);  
        bottom: 0px;  
        height: 100%;  
        padding: 5px 0px;  
      }  
        
      .footer-center [class*=input] {  
        width: 100%;  
        height: 100%;  
        border-radius: 5px;  
      }  
        
      .footer-center .input-text {  
        background: #fff;  
        border: solid 1px #ddd;  
        padding: 10px !important;  
        font-size: 16px !important;  
        line-height: 18px !important;  
        font-family: verdana !important;  
        overflow: hidden;  
      }

html代码

   <nav class="mui-bar mui-bar-tab">  
      <div class="footer-center">  
        <textarea id='msg-text' type="text" class='input-text'></textarea>  
      </div>  
      <label class="footer-right">  
        <button type="button" id="send-btn" onclick="send();">发送</button>  
      </label>  
    </nav>

js代码

    function send() {  
        ui.content.focus();  
        ......  
   }
2016-05-24 10:36 2 条评论 负责人:无 分享
已邀请:
全栈工程师

全栈工程师 - 精通mui、uniapp,承接相关项目外包,解决各种疑难问题。有任何问题可以随时联系,QQ:419761282

楼主,解决这个问题了吗?

轩LOVE青

轩LOVE青

我也遇到了。咋个解决的

  • xingge

    请问你的这个解决了,我也碰到了


    2018-09-13 15:19

该问题目前已经被锁定, 无法添加新回复