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.875 rem;
padding: 0.625 rem 1 rem;
line- height: 1.5 rem;
. leftName{
width: 6.2 em;
margin- right: 0.75 rem;
}
. rightInfo{
line- height: 1.5 rem;
}
}
. blinker{
position: relative;
}
. blinker: after {
position: absolute;
right: - .1 rem;
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: 1 s;
animation- duration: 1 s;
display: inline- block;
content: '' ;
width: .0625 rem;
height: 1 rem;
margin- left: .15625 rem;
border- radius: .09375 rem;
box- shadow: 0 0 .3125 rem 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 ;
}
}