如何檢測輸入何時更改？

通過JavaScript，PHP或HTML。我想這樣做來檢查用戶名是否被允許（在我們這邊）。如何檢測輸入何時更改？

對不起，沒有詳細說明。如果用戶名太短，會在它旁邊顯示一條消息（我會做這部分），說它太短，但爲了自動完成，我需要檢測它。

<script type="text/javascript"> 
document.getElementById('username').onchange=userCheck; 
function userCheck() { 
    document.getElementById("usercheck").innerHTML="kk"; 
} 
</script> 

<form action="devlabs.php"> 
Username: <input type="text" id="username"/><em id="usercheck"></em> 
</form>

來源

2010-06-24 Anonymous the Great

使用javascript處理該輸入的DOM事件。請參閱here以獲取列表。

也許使用像這樣的onkeypress：
< input type =「text」onkeypress =「alert（'you pressed a key'）;」 />

如果您想跟蹤其舊值並進行比較，請使用變量。這是使用onkeypress的example。

來源

2010-06-24 22:18:34

爲什麼不在用戶提交用戶名時進行檢查？

來源

2010-06-24 22:15:37 John

因爲我的完美主義。 – 2010-06-24 22:16:09

@Anonymous the Great：儘管如此，請確保您在提交時仍檢查用戶名。 – animuson 2010-06-24 22:32:34

你在找什麼是onChange事件。例如，如果您使用的是prototype.js，則以下方法可以實現：

$('usernameFieldId').observe('change', usernameValidaitonFunction);

來源

2010-06-24 22:16:33 pkaeding

您需要在輸入元素上使用onchange事件。然後，在每次調用時執行一次Ajax請求，並檢查服務器上的用戶名是否可接受。

document.getElementById('username_input').onchange = checkIfTaken; 
function checkIfTaken() { 
    ajax_check_username(this.value); 
}

就是這樣的。那麼您顯然必須檢查ajax響應並顯示一條消息，如「用戶名確定」或「用戶名不是很酷」。

來源

2010-06-24 22:17:03 Rafael

我試過了，但沒有奏效。你能檢查一下嗎？我會在問題中發佈它。 – 2010-06-24 22:23:27

它不會工作，因爲當瀏覽器解析SCRIPT元素時，它沒有得到「用戶名」文本輸入，所以不知道它存在。你需要學習調試你自己的代碼 - 安裝Firebug！把SCRIPT放在身體的盡頭，就在關門/正文標籤之前。另外，請檢查this.value.length以檢查用戶名的長度。 – Rafael 2010-06-24 22:28:50

在JavaScript中，您可以將onchange事件應用於輸入以檢測用戶輸入完成後輸入的內容，或者在用戶輸入數據時監聽onkeypress事件。

然後，您可以調用您的驗證例程，並根據需要通過輸入修改消息。

來源

2010-06-24 22:17:55 staticbeast

關於使用onkeypress，最好使用onchange。例如，如果用戶使用鼠標將文本粘貼到框中，onkeypress將不會註冊該文本，但onchange將會。

來源

2010-06-24 22:49:39 Rafael

改變你的函數：

function userCheck() { 
    if(document.getElementById("username").value.length > 5) { 
     //no error 
    } else { 
     //error 
    } 
}

或者jQuery中：

$(function() { 
    $("#username").change(function() { 
     if($("#username").val().length > 5) ... 
    }); 
});

來源

2010-06-24 22:58:54 lintal

如何檢測輸入何時更改？

回答

相關問題