jQuery的oninput方法可以用于在輸入框值改變時觸發相應的事件。
$("#inputBox").on("input", function() { // 這里放輸入框改變后需要執行的代碼 });
例如,我們可以利用oninput方法,實現即時搜索功能。當用戶在搜索框中輸入關鍵字時,對應的搜索結果可以自動顯示出來。
$("#searchBox").on("input", function() { var keyword = $(this).val(); // 獲取搜索框中的關鍵字 $.ajax({ url: "search.php", data: {keyword: keyword}, success: function(result) { // 將搜索結果顯示在頁面上 $("#resultBox").html(result); } }); });
除了用于實現即時搜索外,oninput方法還可以用于表單驗證。例如,當用戶在輸入郵箱地址時,我們可以通過監聽輸入框的值改變事件,判斷輸入的是否為合法郵箱地址,并實時給出相應的提示。
$("#emailBox").on("input", function() { var email = $(this).val(); // 獲取郵箱地址 if(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) { $("#emailTip").html("輸入正確"); } else { $("#emailTip").html("請輸入正確的郵箱地址"); } });
總的來說,oninput方法可以方便地實現多種動態效果和表單驗證功能,是jQuery中十分有用的方法之一。
下一篇水平翻轉 css