h5搜索框怎么写_h5页面开发

h5搜索框怎么写_h5页面开发两种方案:方案一:inputtype=”search”class=”search-input”placeholder=”请输入搜索”//js如下:$(“.searchinput”).keypre

h5搜索框怎么写_h5页面开发

两种方案:

方案一:

<input type="search" class="search-input" placeholder="请输入搜索">
    // js如下:
    $(".search input").keypress(function(e){
        var key = $.trim($(this).val());
        if(e.keyCode === 13) {
            //  搜索工作
            that.search(key);
        }
    })
    

方案二:

查了好多文章基本上都说的是监听keydown事件和判断键盘键值码,本人也试过那个适用于键而软键盘我没能用这个方法实现

我的的form的onsubmit方法实现的,也就是表单提交下边直接上代码,这部分是html代码

<html>
<form target="#" id="search_from"> 
    <input class="search_in" type="search" placeholder="请输入关键词" />
</form>

这部分是js代码

<script>
document.getElementById('search_from').onsubmit = function(){
    alert("123");
    yourfun();
}

这样基本功能就实现了 。但是这样的话点击搜索按钮往往第一次页面会刷新一次,只有点击第二次才会出现想要的效果,所以我们还需要实现点击页面不刷新

<script>
<form target="frameFile" id="search_from"> 
    <input class="search_in" type="search" placeholder="请输入关键词" />
    <iframe name='frameFile' style="display: none;"></iframe>
</form>

像这样加个iframe标签就可以了,将from的target对应到iframe的那么就是不会改变当前页面的链接,也就不刷新了

有许多时候我们点击搜索以后会出现比较长的列表,软键盘会盖住用户搜索的信息,我们点击一下屏幕才会使软键盘消失,这样用户体验也不是很好,所以我们可以在调用的方法中加一个软键盘收起的方法

<script>
document.getElementById('search_from').onsubmit = function(e){
    yourfun();
    document.activeElement.blur();//软键盘收起
}

好了这样一些基本的需求就可以实现了

完!!!

 

 

 

 

 

今天的文章h5搜索框怎么写_h5页面开发分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/84048.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注