input type="search" implements the search box

To implement a text search function, when input is required, the Enter button on the keyboard prompts to display "Search".

Reference from: https://segmentfault.com/a/1190000007765742

start~

Input type=text cannot achieve this effect, google it, the type=search added by html5 can do it (but it needs to be covered with a form with action attribute on the outside of input type=search).

 

<div class="search-input-wrap clearfix">
            <div class="form-input-wrap f-l">
                <form action="" class="input-kw-form">
                    <input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw">
                </form>
                <i class="iconfont if-message"></i>
                <i class="iconfont if-close"></i>
            </div>
            <i class="search-cancel f-l">取消</i>
        </div>

 

 

But type=search will have many default styles and behaviors. The ones encountered in this development are:

• The default drop-down box will display the search history;
  
  

• When inputting, "x" will pop up automatically. The style of "x" is different on different mobile phones;
  
  

• On IOS mobile phones (iphone6 ​​ios10 during testing), the input box is oval.
  
  

But we want the style to be displayed according to our custom style, and it can be unified on each mobile phone.

So after several googles, I got the answer:

• Set input autocomplete="off" to remove the pop-up drop-down box;

• Hide the default "x":

• input[type="search"]::-webkit-search-cancel-button{
      display: none;
  }

   

• To set the style for ios, remove the input ellipse under ios:

• -webkit-appearance: none;

   

Also don't forget that if you want to use ajax when submitting your search, you can prevent the default behavior of the form:

 

container.on('submit', '.input-kw-form', function(event){
    event.preventDefault();
})

 

【expand:】

H5 input type="search" does not display the search solution

Open the H5 page in the browser of the IOS (ipad iPhone, etc.) system. It is written as follows:

<input type="search" name="search” id="search">

 The keyboards of the above devices still show "line wrap".

The solution is as follows: nest a layer of form outside the input:

<form action="">
    <input type="search" name="search" id="search">
</form>

 其中form 必须有action。

如果你不想要action，因为它可能影响了你input的提交逻辑，可以重写一下onsubmit onclick等方法来实现。

也可以用简单的方法：action="javascript:return true;"。

【注意事项】

      如果<form></form>表单中只有一个<input type="text"/>，则使文本框获取焦点，并单击回车，form会自动提交。提交路径为action属性拼接到当前路径（action属性默认为空字符串，如果form没有action属性，则提交路径与当前路径相同）。

      浏览器表现：Chrome（桌布版、移动版）会出现此问题，Android手机会出现。Safari（桌面版、移动版）不会出现。

      解决方法：禁止表单提交

    1 设置成<form onsubmit="return false;">

    2 增加一个无name属性的隐藏文本框 

<input type="text" style="display:none;/>

 

    3 监听input的keydown事件

input.addEventListener('keydown', function(e){
    var keywd = e.target.value;
    if(event.keyCode == 13 && keywd) { 
        e.preventDefault();
    } 
});

 

 

 

.