jQuery實(shí)現(xiàn)鍵盤回車搜索功能
更新時(shí)間：2017年07月25日 16:17:14 作者：冰唐玄宇
本文通過代碼給大家介紹了jquery實(shí)現(xiàn)鍵盤回車搜索功能，前臺(tái)代碼和搜索按鈕實(shí)現(xiàn)代碼都給大家貼出了，需要的朋友參考下吧
本來我一直認(rèn)為一個(gè)搜索沒有什么太難做的，直到我接到了上一個(gè)項(xiàng)目，讓不使用按鈕實(shí)現(xiàn)搜索這才讓我開始在網(wǎng)上尋找這一技術(shù)，那么廢話少說，將我的源碼放上來給大家參考。
前臺(tái)代碼
<div class="fl search-box">
<button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button>
<input id="sousuo" name="sousuo" type="search" placeholder="輸入搜索內(nèi)容" value="">
</div>
搜索按鈕實(shí)現(xiàn)
$(function () {
$("body").on("click", "#btnSubmit", function () {
var sousuo = $("#sousuo").val();
if (sousuo == "") { alert("請(qǐng)輸入信息"); return false; }
location.href = "{$:CSSiteUrl}search.html?keywords=" + escape(sousuo);
});
});
下面也就是本次的重頭戲，鍵盤回車實(shí)現(xiàn)搜索
$('#sousuo').bind('keypress', function (event) {
if (event.keyCode == "13") {
$("#btnSubmit").click();
}
})
或許大家可以發(fā)現(xiàn)，其實(shí)相當(dāng)于在回車鍵event.keyCode == “13”，也就是說鍵盤的的第13個(gè)鍵碼，那么借此幫助，以后想實(shí)現(xiàn)其他的按鍵的話，只要去查詢鍵盤對(duì)應(yīng)的鍵碼就好了。
總結(jié)
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)鍵盤回車搜索功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法實(shí)例
這篇文章主要介紹了輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法,實(shí)例分析了jquery遮罩層插件的定義、功能及使用方法,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07
jQuery CSS()方法改變現(xiàn)有的CSS樣式表
使用CSS()方法改變現(xiàn)有的CSS樣式表，css()方法在使用上具有多樣性，比如要改變鏈接顏色，如果需要改變多個(gè)樣式屬性，可先定義屬性變量，然后直接賦值給css()方法2014-09-09
jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
今回給大家介紹個(gè)圓形旋轉(zhuǎn)的效果，基于圓形的物理特性，又圓上任意一點(diǎn)可以作為一個(gè)控制按鈕，然后拖動(dòng)它來使圖片輪換。2011-01-01
這篇文章主要演示了5個(gè)jQuery Mobile 觸摸事件實(shí)例,需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了jQuery實(shí)現(xiàn)跨域的相關(guān)資料,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery日程管理插件fullcalendar使用方法，整合農(nóng)歷節(jié)氣和節(jié)日，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JQuery實(shí)現(xiàn)ul中添加LI和刪除指定的Li元素功能完整示例
這篇文章主要介紹了JQuery實(shí)現(xiàn)ul中添加LI和刪除指定的Li元素功能,結(jié)合完整實(shí)例形式分析了jQuery基于事件響應(yīng)的頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-10-10
jquery中利用navigator.userAgent.indexOf來判斷瀏覽器類型，并進(jìn)行了一下處理，如果不想使用jquery，稍為修改下代碼就可以為自己所用2011-04-04
使用jQuery中的wrap()函數(shù)操作HTML元素的教程
wrap(),顧名思義,就是包裹的意思,就是在你所在器外層包裹一層?xùn)|西,接下來我們就詳細(xì)來看使用jQuery中的wrap()函數(shù)操作HTML元素的教程:2016-05-05
在一些網(wǎng)站上，我們經(jīng)常見到返回頂部的效果，本文給大家介紹基于jquery如何實(shí)現(xiàn)返回頂部效果，非常不錯(cuò)，感興趣的朋友可以參考下2016-07-07