问题描述

点击搜索框的时候,需要将软键盘的return go 前往 按键文案变成 搜索search,并且点击的时候发起搜索。

实现方式是将inputtype 设置成 search,并在外层套一个form,在一般浏览器如 QQ 浏览器,uc 浏览器等上能将软键盘显示成搜索,但是在 safari 浏览器上并不能正常将软键盘文案改变。

解决办法

form上设置action,并将其值设置成.,但是需要控制在搜索的时候应将表单默认行为拦截,form上添加return false即可。

源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 搜索框 -->
<form class="search-top" action=".">
<div class="search-wrap">
<input
type="search"
name="key"
id="search-input"
placeholder="keyword..."
autocapitalize="off"
autocomplete="off"
autocorrect="off"
/>
<span class="search"><i class="icon-search"></i></span>
<i class="icon-reset reset"></i>
</div>
<div class="cancel-btn">取消</div>
</form>
1
2
3
4
5
6
7
$('.search-top').on('submit', function(e) {
var text = $('#search-input')
.val()
.trim();
text && that.emit.emit('search', text);
return false;
});

reference

Show ‘Search’ button in iPhone/iPad Safari keyboard