提高輸入框輸入體驗的方法

一、自動填充

自動填充功能能夠讓用戶在輸入框中輸入文字時，系統根據用戶輸入的內容自動推薦相關的辭彙。這樣不僅可以讓用戶輸入更加快捷，還可以減少輸入錯誤的概率，提高輸入框的輸入體驗。要實現自動填充功能，我們可以使用 中的autocomplete屬性和JavaScript技術來實現。

<input type="text" id="input-box" autocomplete="on">

<script>
    var inputBox = document.getElementById("input-box");
    var dataList = ["Apple", "Banana", "Cherry", "Durian", "Eggplant", "Fig"];
    inputBox.addEventListener("input", function() {
        var inputVal = this.value;
        var suggestList = [];
        for (var i = 0; i < dataList.length; i++) {
            if (dataList[i].indexOf(inputVal) != -1) {
                suggestList.push(dataList[i]);
            }
        }
        if (suggestList.length > 0) {
            var suggestHtml = "<ul>";
            for (var i = 0; i < suggestList.length; i++) {
                suggestHtml += "<li>" + suggestList[i] + "</li>";
            }
            suggestHtml += "</ul>";
            document.getElementById("suggest-area").innerHTML = suggestHtml;
        } else {
            document.getElementById("suggest-area").innerHTML = "";
        }
    });
</script>

二、聯想輸入

聯想輸入是指在用戶輸入文字時，系統通過自動搜索推薦相關的辭彙。相對於自動填充，聯想輸入的搜索範圍更廣，更加智能。實現聯想輸入需要使用到JavaScript和後台的介面技術。在後台，可以通過Ajax技術與伺服器交互，從而實現聯想搜索。在前端，我們可以使用 中的oninput事件來接收用戶輸入，並通過XMLHttpRequest對象與後台介面進行交互。

<input type="text" id="input-box">

<script>
    var inputBox = document.getElementById("input-box");
    inputBox.addEventListener("input", function() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/search?q=" + this.value, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var resultList = JSON.parse(xhr.responseText);
                var resultHtml = "<ul id='result-list'>";
                for (var i = 0; i < resultList.length; i++) {
                    resultHtml += "<li>" + resultList[i] + "</li>";
                }
                resultHtml += "</ul>";
                document.getElementById("result-area").innerHTML = resultHtml;
            }
        };
        xhr.send();
    });
</script>

三、輸入驗證

輸入驗證是指在用戶輸入文字後，系統會對輸入的內容進行自動驗證，從而提高輸入框的輸入體驗。比如，輸入框中只能輸入數字、字母或符號等。我們可以使用輸入框自帶的pattern屬性，或者使用JavaScript進行驗證輸入內容的合法性。

<input type="text" id="input-box" pattern="[A-Za-z0-9]+">

<script>
    var inputBox = document.getElementById("input-box");
    inputBox.addEventListener("input", function() {
        var inputVal = this.value;
        if (/^[A-Za-z0-9]+$/.test(inputVal)) {
            this.style.borderColor = "green";
        } else {
            this.style.borderColor = "red";
        }
    });
</script>