IOS自定义键盘搜索键

最新推荐文章于 2024-06-05 13:49:16 发布

转载最新推荐文章于 2024-06-05 13:49:16 发布 · 2k 阅读

IOS开发同时被 2 个专栏收录

27 篇文章

订阅专栏

Hybird 编程

11 篇文章

订阅专栏

本文介绍如何使用HTML5的input[type=search]属性，在iOS设备上定制搜索框的表现形式，包括更改键盘上的确认按钮为搜索图标，并自动收起键盘，以及如何通过CSS自定义搜索框的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：https://www.mxgw.info/tag/ios

之前知道HTML5的input属性，新增了一种type=search。当系统焦点在input[type=search]元素上时，iOS会自动更改键盘的确认按键为搜索，且按下后自动收齐键盘。

但是我尝试了一次，一直不成功，最后发现，原来是姿势不对。

input[type=search]必须放在一个form标签中，才会更改iOS键盘的效果。

 
        1
       
        2
       
        3
       
        4
       
        5
       
        <div 
        class
        =
        "mod_search"
        >
       
        <form>
       
        <input 
        type
        =
        "search"
         
        name
        =
        "search"
         
        id
        =
        "search"
         
        placeholder
        =
        "Search"
         
        autosave
        =
        "unique"
        >
       
        </form>
       
        </div>

效果如下图：

input[type=search]

还能通过一些webkit私有属性，自定义这个搜索框的样式，例如右边的XX，或者placeholder字体颜色等。

  
         1
       
         2
       
         3
       
         4
       
         5
       
         6
       
         7
       
         8
       
         9
       
         10
       
         11
       
         12
       
         13
       
        input[type="search"]::-webkit-input-placeholder 
        {
       
        color
        :
         
        orangered
        ;
         
        }
       
        input[type="search"]::-webkit-search-cancel-button 
        {
       
        /* Remove default */
       
        -webkit-appearance
        :
         
        none
        ;
       
        /* Now your own custom styles */
       
        height
        :
         
        10px
        ;
       
        width
        :
         
        10px
        ;
       
        background
        :
         
        red
        ;
       
        /* Will place small red box on the right of input (positioning carries over) */
       
        }