這次帶給大家操作search組件在鍵盤顯示，操作search組件在鍵盤顯示的注意事項有哪些，下面就是實戰案例，一起來看一下。
程式碼如下所示：
<form action="" target="frameFile"> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)"> <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="lists"></ListItem> <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p> </p> </mt-search> <iframe name='frameFile' style="display: none;"></iframe> </form>
解決方法：
mint-ui的search元件input預設也是type="search"類型的，但是還需要在外層包一組form標籤，並且帶有action,就會在鍵盤中出現搜尋按鈕。
如上是方法一：
在手機鍵盤點擊搜尋的時候，頁面會刷新，所以給form加一個target，target規定在何處打開action URL，再放入一個隱藏的iframe,起名為form的target的值，這樣則在當前頁面展示出搜尋的內容
如下是方法二：
<form action="" onsubmit="return false;"> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)"> <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="lists"></ListItem> <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p> </p> </mt-search> </form>
這裡直接給onsubmit事件寫入return false，禁止提交，則搜尋清單頁也可以在目前頁面展示。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是操作search組件在鍵盤顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
