设置移动端的搜索键盘

最新推荐文章于 2020-03-14 09:38:08 发布

qq_14936009

最新推荐文章于 2020-03-14 09:38:08 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 移动端文章标签：移动端

本文链接：https://blog.youkuaiyun.com/qq_14936009/article/details/80408410

3 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的简单搜索功能实现方法，包括如何响应键盘事件来触发搜索行为，并通过URL传递搜索参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>

    <meta name="format-detection" content="telephone=no, email=no"/>

    <style>

        ::-webkit-search-cancel-button { display: none; }

    </style>

    <script type="text/javascript">

        function seacherKeyDown(e){

            //搜索判断是移动端还是pc端

            var e = e || window.event;

            if(e.keyCode == 13){

                var leftVal = $.trim($("#js_id_seach").val());

                if(leftVal==0 || leftVal=='搜索关键字'){

                    $("#js_id_seach").focus();

                }else{

                    window.location.href='/was5/web/search?channelid=294808&searchword='+encodeURIComponent(leftVal);

}

}

}

    </script>

</head>

<body>

<form action="#" target="testif">

    <input type="search" placeholder="搜医生、搜疾病" onkeypress="seacherKeyDown(event)"

           id="js_id_seach" style="width: 300px;height: 50px;"/>

    <iframe name="testif" style="display: none;"></iframe>

</form>

</body>

</html>