input输入光标会出现在position提示框上面的问题

Question

就像这样，蓝色的竖条是输入框的光标，如果输入超过50个字的时候上面的提示框就会下来，但是光标会浮在提示框的上面，不知道为什么。
项目使用的vue，提示框定位用的position: absolute;z-index是9999
input框套在一个position: fixed;定位的div里，这个div的z-index是99.
bug出现在手机版微信浏览器里，电脑版没有这个问题

================代码================

<div class="topHeader">
  <span class="backIcon" @click="goback">
    <i class="leftIcon"></i>
  </span>
  <input placeholder="故障现象" v-model="keyWord" maxlength="50" @focus="onfocus()"  @keyup="keyup($event)" @blur="onblur()" @input="oninput"/>
  <div class="HotspotClear">
    <i class="del"></i>
  </div>
  <div class="seachBtn" @click="search">搜 索</div>
</div>
<div class="warning" v-text="warningText" :style="this.warningSlide === true ? 'top:0;' : 'top:-1.18rem;' ">

css:

.topHeader {

width: 100%;
position: fixed;
top: 0;
z-index: 99;
height: .8rem;
line-height: .8rem;
background: #ffffff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;

}

.warning {

width: 100%;
height: 1.18rem;
line-height: 1.18rem;
text-align: center;
color: #ffffff;
background: #d65454;
position: fixed;
top: -1.18rem;
transition: all .3s;
z-index: 9999;

}

topHeader 是input外层的盒子，和warning 弹出框在一个层级

Answer 1

如果css无法解决的话，可以尝试弹窗时让input失去焦点，光标就不出现了:

var input = document.getElementById("xx");
input.blur();

弹窗方法加个结束回调，弹窗结束时搞回焦点：

input.focus();

Answer 2

加个readonly?

Answer 3

问题解决了吗