自從 HTML5 正式發布后,oninput 成為了一個非常重要的事件,因為它當輸入框的值發生變化時就會觸發。這個事件可以在任何文本輸入元素上使用,比如文本框、文本域、搜索框等。oninput 事件可以通過 JavaScript 控制,而且也可以執行 PHP 代碼。
例如,你可以在一個文本框上添加 oninput 事件來統計用戶在文本框中輸入的字符數,并將其傳遞給一個 PHP 頁面進行處理:
<input type="text" name="inputBox" oninput="countChars(this.value)"> <script> function countChars(value) { var charCount = value.length; var xhr = new XMLHttpRequest(); xhr.open("POST", "countChars.php", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("charCount=" + charCount); } </script>
在這個例子中,oninput 事件會在用戶在文本框中輸入字符時觸發 countChars 函數。該函數會使用 Ajax 將字符數發送到一個指定的 PHP 腳本中。這個 PHP 腳本將在后臺處理這個數據并返回數據或執行其他操作。
在這個例子中,我們使用了 XMLHttpRequest 對象來發起一個 Ajax 請求。該對象提供了異步向服務器發送請求并獲取響應的功能。我們使用 POST 請求將數據發送到服務器,而服務器則會在執行完成后將響應數據返回給 JavaScript。
<?php if (isset($_POST['charCount'])) { $charCount = $_POST['charCount']; echo "您已經輸入了 " . $charCount . " 個字符!"; } else { echo "請在文本框中輸入一些內容!"; } ?>
這個 PHP 腳本的作用是當接收到前面的 Ajax 請求時,處理請求中的數據并返回響應。在這個例子中,我們只是簡單地將字符數返回給 JavaScript。但實際使用中,您可以根據情況來處理請求中的數據并返回適當的結果。
總之,oninput 事件可以讓您實時獲取文本框輸入的內容,并將它們發送到服務器進行處理。它是一個簡單而強大的 JavaScript 事件,可幫助您提高 Web 應用程序的功能和用戶體驗。