html实现页内搜索框

添加一个搜索框和一个按钮，在按钮点击时调用一个searchPage函数进行页内搜索

<form>
    <input type="text" id="search-input" placeholder="搜索..." />
    <button type="button" onclick="searchPage();">搜索</button>
</form>

添加搜索函数，主要是调用window.find函数搜索，IE浏览器并不支持这个函数，chrome支持

<script>
function searchPage() {
    //获取输入的内容
    var text = document.getElementById("search-input").value.trim();
    //判断是否内容为空
    if (text === "") {

    }else{
        //保存搜索内容
        searchText= text;
        //清空搜索框
        document.getElementById("search-input").value = "";
    }
    //开始搜索
    window.find(searchText);
}
</script>

为什么我要清空搜索框之后搜索，然后还加上判断语句，因为我发现有的浏览器它搜索一直在搜索搜索框里面的内容。只有清空后才开始搜索页面上的内容。搜索框里有内容，就保存在全局变量里，清空搜索框，之后用全局变量进行搜索。

如果想要实现输后回车搜索，就添加按键监听

var searchBox = document.getElementById("search-input"); 
searchBox.addEventListener("keydown", function(event) {
    if (event.keyCode === 13) { // 判断按下的键是否是回车键，keyCode为13表示回车键
        event.preventDefault(); // 阻止默认的表单提交行为
        searchPage();//回车搜索
    }
});

通过css可以定义搜索在页面内的位置

<style type="text/css">

    form{
        position: absolute;
        right:10px;
        top:10px;
    }
</style>