CODEWITHSUNDEEP
htmliosformssafarinuxt.js
xKxAxKx
xKxAxKx

Reputation: 1074

Nuxt.js: <input type="search"> does not work

If you write <input type="search"> in HTML5, the keyboard of the input in safari on iOS is as follows.

enter image description here

Submit button is "search".

By the way, I am trying to create a search form in Nuxt.js as well and mark it up in component as below.

<div class="search-form">
  <form
    @submit.prevent
    @keyup="onKey($event)">
    <input
      v-model="keyword"
      :placeholder="search form"
      type="search"
      @keypress="setCanMessageSubmit($event)">
  </form>
</div>

However, the keyboard shows "return" instead of "search" as shown below.
enter image description here

Why is this?
Is there a way to solve it?

Upvotes: 0

Views: 1210

Answers (1)

pompopo
pompopo

Reputation: 969

Try adding action attribute to your form tag.

<div class="search-form">
  <form
    action="."
    @submit.prevent
    @keyup="onKey($event)">
    <input
      v-model="keyword"
      :placeholder="search form"
      type="search"
      @keypress="setCanMessageSubmit($event)">
  </form>
</div>

My fiddle: https://jsfiddle.net/pompopo/2b0yc6oq/7/

Upvotes: 1

Related Questions