前端调用ios和Android输入法中的搜索按钮

来源：互联网发布：mysql事务有什么用编辑：程序博客网时间：2024/05/16 18:01

在移动端的项目中，百分之九十九都有搜索功能，为了考虑一些平时玩手机不溜的人群我们会增加搜索的button让他们点击。但是对于平时打字很666的童鞋来说，不能使用键盘中的搜索表示很嗤之以鼻。下面的代码就解决了调用手机端软键盘搜索功能的问题。多次实践，目前没发现什么问题。

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ys-search</title>    <style>        input {            height: 15px;            padding: 10px;            width: 230px;            font-size: 15px;            border: 1px solid #ff8000;            border-radius: 5px;            box-sizing: content-box;            outline: none;        }        /*去掉搜索框里面的那个小X号*/        ::-webkit-search-cancel-button {              display: none;         }    </style></head><body>    <form action="javascript:search()" >        <input type="search" name="" placeholder="请输入想要搜索的内容" autocomplete="off" value="">    </form>    <script>        var oInput = document.querySelector("input");        function search () {            if(oInput.value == '') {                alert("请输入想要搜索的内容")            } else {                alert("您想要搜索的内容是：" + oInput.value);            }        }        oInput.onclick = function () {            oInput.value = '';        }    </script></body></html>

你也可以在电脑里用enter键，因为这个是type=search的利器。

阅读全文

0 0