移动端 input 输入框实现自带键盘“搜索“功能并修改X

Posted 2020-10-29 web_study

主要利用html5的，input[type=search]属性来实现，此时input和type=text外观和功能没啥区别；

html代码入下:

<form action="" id="myform">
<input type="search" id="input" value="" placeholder="快速搜索" results="5" />
</form>

但要实现点击键盘右下角搜索，来发送请求，js代码如下（以下代码段记得引入jquery）：

//方法一
$("#myform").on(‘keypress‘, function(e) {
    var keycode = e.keyCode;
    var searchName = $(this).val();
　　//keycode是键码，13也是电脑物理键盘的 enter 
    if(keycode == ‘13‘) {
    alert(2)
    e.preventDefault();
    //请求搜索接口  

    }
});
//方法二
//这两种都能用, 一个是在form上加id 一个是在input元素加id
//对于苹果手机添加一个form元素是必要的,否则只能实现功能但是键盘的文字不能变成搜索字样
  $(‘#myform‘).bind(‘search‘, function () {
    //coding
      alert(1);
  });
    /*$(‘#input‘).bind(‘search‘, function () {
        
        alert(1);
    });*/

需要注意的是，input[type=search]，在用户输入时，默认情况下会自动在输入框最右侧出现一个 ‘X’，是为了方便用户点击清除所输入的内容，但是这个 X 的默认样式却可能机型不一样而不同，有的是默认一个蓝色的X，很不美观，

我们往往需要修改这个X或者直接去掉它，应该怎么实现呢？答案很简单，只要一个CSS属性即可，代码如下：

 input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;/*此处只是去掉默认的小×*/
}

只要通过 -webkit-search-cancel-button这个属性即可实现去除，去除后我们可以自定义样式；

input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;

    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #EBEBEB;
}

input[type=search]::-webkit-search-cancel-button:after{
    position: absolute;
    content: ‘x‘;
    left: 25%;
    top: -12%;
    font-size: 20px;
    color: #fff;
}