1. First of all, pay attention to input type="search"
<input @keypress="searchGoods" type="serch" placeholder="Search for Products">
2. Listen to keypress events
(1) KeyDown, KeyUp events
These events occur when an object has focus pressed ( KeyDown ) or releases ( KeyUp ) a key. (To interpret ANSI characters, the KeyPress event should be used.)
(2) KeyPress event
This event occurs when the user presses and releases an ANSI key.
3. Block event default behavior
Add searchGoods method to methods,
Judge keyCode ==13
Block the default event (the default is a newline)
Call the search interface by getting the value to be searched.
searchGoods(event) {
if ( == 13) { //If you press enter key 13 is enter (); //Default events are prohibited (the default is a newline) ()
Toast("Click to confirm")
}
}
4. Everyone will find it in the project, the soft keyboard on the iOS system, the keycode=13 is called line breaking. It is very bad for the customer experience. Can you modify the copywriting of the soft keyboard? The answer is yes, and the solution is to move to another article.
https:///article/(WeChat built-in development iOS modify the keyboard "line wrap" to "search")
The above article vue implements mobile keyboard search event monitoring is all the content I share with you. I hope it can give you a reference and I hope you can support me more.