[英]Run javascript function when user finishes typing instead of on key up?
[英]jquery-Print user's input when user finishes typing instead of on key up?
我想在用戶停止輸入時打印其輸入。 我的html代碼是:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jacoco.css">
<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
<script src="jacoco.js"></script>
</head>
<body>
<div class="search">
<input type="text" id='jacoco' placeholder="Search for a title..">
</div>
<div class="results"></div>
</body>
</html>
我正在嘗試做這篇文章中建議的操作,但是它不起作用。 我的js代碼是:
var typingTimer; //timer identifier
var doneTypingInterval = 500; //set wait time until search starts to 5 seconds
//on keyup, start the countdown
$('#jacoco').keyup(function(){
clearTimeout(typingTimer);
if ($('#jacoco').val()) {
alert($("#jacoco").val());
typingTimer = setTimeout(doneTyping, doneTypingInterval);
}
});
//user is finished typing
function doneTyping () {
alert('$("#jacoco").val();');
}
因此,當我在搜索框中輸入內容時,它不會打印我的輸入內容。
您正在傳遞字符串'$("#jacoco").val();'
alert()
。 '
應刪除。 並且也使用console.log
而不是alert()
var typingTimer; //timer identifier var doneTypingInterval = 500; //set wait time until search starts to 5 seconds //on keyup, start the countdown $('#jacoco').keyup(function(){ clearTimeout(typingTimer); if ($('#jacoco').val()) { //alert($("#jacoco").val()); typingTimer = setTimeout(doneTyping, doneTypingInterval); } }); //user is finished typing function doneTyping () { console.log($("#jacoco").val()); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>IMDB Search</title> <link rel="stylesheet" href="jacoco.css"> <script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script> <script src="jacoco.js"></script> </head> <body> <div class="search"> <input type="text" id='jacoco' placeholder="Search for a title.."> </div> <div class="results"></div> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.