如何檢查是否有人在輸入文字上添加了4個字母或更多？

Question

使用此腳本，波紋管對我的文件veriUSPF.php進行了ajax調用，我有一個SELECT查詢來檢查用戶名是否可用。 該腳本在onBlur上執行，但是我希望它僅在有人在輸入中添加4個或更多字母時才執行ajax調用，這可能嗎？

的HTML：

<input id="UsName" type="text" minlength="4" maxlength="17" autocomplete="off" onBlur="checkAvailability()" value="<?php echo htmlentities($username, \ENT_QUOTES, 'UTF-8', false); ?>" name="changeUsernamePF">
<span id="user-availability-status"></span>

腳本：

function checkAvailability() {
    jQuery.ajax({
        url: siteURL + "/veriUSPF.php",
        data: "changeUsernamePF=" + $("#UsName").val(),
        type: "POST",
        success: function(a) {
            $("#user-availability-status").html(a)
        }
    })
}

Answer 1

您可以使用輸入事件：

 $('#UsName').on('input', function(e) { if (this.value.length>=4) { console.log('call ajax now'); } }).trigger('input'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="UsName" type="text" minlength="4" maxlength="17" autocomplete="off" onBlur="checkAvailability()" value="" name="changeUsernamePF"> <span id="user-availability-status"></span> 

使用內聯事件，您可以編寫：

 function checkAvailability(e, ele) { if (ele.value.length>=4) { console.log('call ajax now'); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="UsName" type="text" minlength="4" maxlength="17" autocomplete="off" oninput="checkAvailability(event, this)" value="" name="changeUsernamePF"> <span id="user-availability-status"></span>