zoukankan      html  css  js  c++  java
  • 移动端input搜索的实现

    html代码如下:

    <form action="javascript:return true;">
        <input type="search" class="search_input" placeholder="搜索" onblur="$template('datalist').clear().append();$template('totalDesc').clear().append()"/>
    </form>
    

    js代码如下:

    $('.search_input').on('keyup',function(e){
        var keycode = e.keyCode;
        var searchContent = $(this).val();
        if(keycode==13) {
            //e.preventDefault();
            $(".location").show();
            $('.icon-tubiao-').show();
            $(".search_cancel").hide();
            if(!$(this).val()) {
                $(this).css("background", "url(/dashboard/disposalParty/img/search_tips.png) #f7f7f7 no-repeat 40%")
            }
            $(this).trigger('blur');
        }
    })
    

    IOS上要加上form标签

    开发过程中存在的问题:
    1.可以调出手机软键盘,但是得用type="search"来统一安卓和苹果机的搜索按键
    2.不管是安卓还是苹果手机,搜索按键的keycode都是13,和电脑上的回车键一样
    3.点击键盘搜索,页面键盘消失,页面也会随之刷新;原因:form会提交,所以要阻止默认事件,这里写了e.preventDefault();不好使,没有找到原因;
    在form 标签里的action ="javascript:return true;"就解决了;这里去执行提交,然后返回true,相当于什么都没有发生,又代替了默认事件。

    网上方案:https://blog.csdn.net/listmana/article/details/53942361

  • 相关阅读:
    【NOIP2006T】作业调度方案
    「NOIP2012P」寻宝
    51Nod1084 矩阵取数问题 V2
    51Nod1294 修改数组
    51nod1122 机器人走方格V4
    多项式相关模板#1
    51Nod1514 美妙的序列
    Jzoj5674 香槟
    Jzoj5669 排列
    Jzoj5665 奥立卡的诗
  • 原文地址:https://www.cnblogs.com/llff123/p/10519374.html
Copyright © 2011-2022 走看看