美文网首页Web前端之路让前端飞Web 前端开发
移动页面input手机键盘中的“搜索”按键

移动页面input手机键盘中的“搜索”按键

作者: Evelynzzz | 来源:发表于2017-11-22 15:52 被阅读1196次

    满足以下几点机即可:

    • input type="search"
    • 放到form标签中
    • 使用action属性
    <form action="." >
      <input type='search' />
    </form>
    
    注意:

    如果只使用input type="search",而不放到form标签中,则显示“换行”;
    如果放到form中,但是使用type="text",则显示“前往”;
    如果放到form中,使用input type="search",但没有action属性,Android不会有问题,但在IOS8以上的系统中,键盘上仍不会显示“搜索”,而是显示“换行”。

    回车事件

    如果页面中不设置“搜索”按钮来触发搜索操作,而是当点击键盘中的“搜索”时就进行搜索操作。可以监听输入框的回车事件。比如在onKeyDown事件监听中,获取事件keyCode,判断是否输入“回车”(keyCode=13),然后再进行相关的搜索操作。

    点击搜索之后页面自动刷新的问题

    因为这个form中只有一个输入框,所以在输入框中输入回车时,页面会自动刷新。要避免此情况,可以在添加一个隐藏的input

    <form action="." >
      <input id="iptSearch" type='search' />
      <input type="text" style="display:none;"/>
    </form>
    
    输入框内的小叉X

    type=“search”的输入框在获取到焦点后,默认会出现一个小叉叉,用于清空输入框中的内容,而且样式因浏览器而异。如果想要隐藏这个X,可以使用如下CSS:

    input[type="search"]::-webkit-search-cancel-button{
        -webkit-appearance: none;
    }
    
    参考阅读:

    相关文章

      网友评论

        本文标题:移动页面input手机键盘中的“搜索”按键

        本文链接:https://www.haomeiwen.com/subject/ozanvxtx.html