盒子
盒子
文章目录
  1. 问题描述
  2. 解决办法
  3. 源代码
  4. reference

Show 'Search' button in iPhone/iPad Safari keyboard

问题描述

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

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

解决办法

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

源代码

<!-- 搜索框 -->
<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>
$('.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