移动端 文本输入框实现自带"搜索"功能,并修改X

先说一句,项目有需求,用H5来开发手机app,我第一次较系统的接触H5的知识,略有心得,记录下来.

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

html代码入下:

但要实现点击键盘右下角搜索，来发送请求，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);
    });*/

对上述2种监测用户点击"搜索"按键的方法,我曾进行了实际的测试.结果是:
1.苹果手机上,input外面必须要套一个form标签,否则最终可以实现搜索的功能,但是输入法里显示仍是"完成"按键,而不是"搜索"字样;
2.第一种办法,对form监测keypress事件,可行,能取到用户每次在屏幕上点击的按键值;
但是第二种方法,不管是对form绑定search还是对input绑定search事件,不管是在手机chrome,还是在手机Firefox上,取到的按键值始终是undefined,也就是说不能取到键值.
此种办法,我暂时存疑.~

需要注意的是，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;
}

更正: 经过实地测试,第二种方法可行.

//第二种方式:
$('#keyForm').bind('search', function (event) {
   //请求搜索接口  
    event.preventDefault();
    $('#txt_key').blur();
    btn_search_click();
});

发现bind search事件时,不需要再监测keyCode值,点击"搜索"按钮就会自动触发search事件!
但是,有1点注意:
1.查资料后,发现search并没有event这个参数.所以不能阻止form的默认提交行为. 会造成,第一次搜索时,页面整体的刷新,转圈圈. 效果非常不好~~
怎么办呢?

要么换用第1种方法,要么如下:

"return false;"  action="">
        "search" placeholder="请输入关键词" οnsearch="findBuss();"/>
    

给form加一个οnsubmit="return false;"即可阻止默认的提交行为了,也就达到阻止刷新页面的目的啦!

参考:https://www.cnblogs.com/lst619247/p/9292947.html
踩在大神的肩膀上,还是要感谢前人的分享!