Meet the following requirements:

  • input type="search"

  • Put it in the Form tag

  • Use the Action property

Note:

If input type=”search” is used instead of the form tag, “newline” is displayed. If you place it in a form, but use type=”text”, then “go” is displayed. If you put it in a form and use input Type =”search” without the Action attribute, Android will have no problem, but on IOS8 and older, the keyboard will still not say “search” but “line feed”.

Enter the event

If the “search” button is not set in the page to trigger the search operation, but when the “search” in the keyboard is clicked, the search operation is carried out. You can listen for enter events in input boxes. For example, in the onKeyDown event listener, obtain the event keyCode, determine whether to enter “enter” (keyCode=13), and then conduct the relevant search operation.

The page automatically refreshes after clicking search

Since there is only one input field in the form, the page refreshes automatically when you type enter in the input field. To avoid this, add a hidden input.

<form action="." > <input id="iptSearch" type='search' /> <input type="text" style="display:none;" /> </form>Copy the code
The little X in the input box

The type= “search” input box, when it gets focus, defaults to a small cross to clear out the content of the input box, and the style varies by browser. If you want to hide the X, you can use CSS like this:

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
}
Copy the code

In vue, listen for @keypress or keyDown when the keyboard code=13…

searchResult(event){if (event.keyCode == 13) {event.preventDefault(); / / prohibited the default event (the default is a newline). This keyword = event. The target. Valuethis. The search ()}},Copy the code