H5 调起键盘后的相关操作

1,676 阅读1分钟

在做H5页面时输入内容后点击右下角【发送/完成/搜索】等无法关闭键盘;且IOS一般键盘右下角默认是【换行】,有时候我们需要改成【发送/完成/搜索】等

H5端input标签通过手机软键盘进行搜索,并关闭软键盘

 <input type="text" @keyup.enter="searchEvent">
 
 //点击搜索之后想要把软键盘关闭加 document.activeElement.blur();
  searchEvent(){
     document.activeElement.blur();//关闭手机软键盘
  }

enterkeyhint 设置 iOS/Android 键盘 enter 键

关键字值描述
enter‘enter’表示回车,多出现在<textarea>文本域等需要多行输入的场景中。
done‘done’表示完成,表示没有更多内容输入,输入结束。
go‘go’表示前往,, 意思是把用户带到他们输入的文本的目标处。
next‘next’表示下一项,通常会移动到下一个输入项那里。
previous‘previous’表示上一个,通常会移动到上一个输入项那里。
search‘search’表示搜索,通常用在搜索行为中。
send‘send’表示发,通常用在文本信息的发送上。
 <input type="text" enterkeyhint="..." />

缩略图如下所示:

enterkeyhint-full.jpg