The input box in the vue h5 nested app is focused but the keyboard does not pop up

Requirements: When the user enters the page, he hopes that the cursor will be focused, but the soft keyboard should not be popped up

Ideas:

Before the user clicks, replace it with a div box, use pseudo-elements to make a focus style, and trigger a focus event when the user clicks to modify it

data() {
    
    
    return {
    
    
      isShow: true //默认显示
    };
  },
	<van-row class="div-radius">
		<van-col span="24">
            <div class='flex username' v-if='isShow'>
              <div class='leftName'>姓名</div>
              <div class='flex1' @click='inputUsername'>
              	<span class='blinker'>{
    
    {
    
    username}}</span>
              </div>
            </div>
            <van-field
	            v-else
	            v-model="username"
	            name="用户名"
	            ref="username"
	            label="姓名"
	            placeholder="请输入姓名"
	            :rules="[{ required: true, message: '请输入姓名' }]"
          />
       </van-col>
     </van-row>
   //用户点击的时候,才出发聚焦事件
	inputUsername() {
    
    
      this.isShow = false;
      this.$nextTick(() => {
    
    
        this.$refs.username.focus();
      });
    }
.flex{
    
    
 display: flex;
 align-items: center;
}
.flex1{
    
    
  flex:1;
}
 .username{
    
    
  color: #323233;
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  line-height: 1.5rem;
  .leftName{
    
    
    width: 6.2em;
    margin-right: 0.75rem;
  }
  .rightInfo{
    
    
    line-height: 1.5rem;
  }
}
.blinker{
    
    
  position: relative;
}
.blinker:after {
    
    
  position: absolute;
  right: -.1rem;
  top:0;
  -webkit-animation-name: blinker;
  animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  display: inline-block;
  content: '';
  width: .0625rem;
  height: 1rem;
  margin-left: .15625rem;
  border-radius: .09375rem;
  box-shadow: 0 0 .3125rem rgba(255, 255, 255, 0.3);
  background: #000;
}
@-webkit-keyframes blinker {
    
    
    from {
    
    
        opacity: 1;
    }
    to {
    
    
        opacity: 0;
    }
}
@keyframes blinker {
    
    
    from {
    
    
        opacity: 1;
    }
    to {
    
    
        opacity: 0;
    }
}

Guess you like

Origin blog.csdn.net/weixin_45108907/article/details/111823201