[JQUERY] 사용자가 종료 키까지 대신 입력 할 때 자바 스크립트 함수를 실행?
JQUERY사용자가 종료 키까지 대신 입력 할 때 자바 스크립트 함수를 실행?
해결법
-
1.그래서, 당신은 단지 잠시 동안 중단 마무리 입력 수단을 추측거야, 5 초 말한다. 그래서 그와 마음에, 사용자가 키를 놓을 때 타이머를 시작하고 그들이 하나를 누르면을 취소 할 수 있습니다. 나는 문제의 입력 #myInput 될 것입니다 결정했다.
그래서, 당신은 단지 잠시 동안 중단 마무리 입력 수단을 추측거야, 5 초 말한다. 그래서 그와 마음에, 사용자가 키를 놓을 때 타이머를 시작하고 그들이 하나를 누르면을 취소 할 수 있습니다. 나는 문제의 입력 #myInput 될 것입니다 결정했다.
몇 가지 가정을 만들기 ...
//setup before functions var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms, 5 second for example var $input = $('#myInput'); //on keyup, start the countdown $input.on('keyup', function () { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //on keydown, clear the countdown $input.on('keydown', function () { clearTimeout(typingTimer); }); //user is "finished typing," do something function doneTyping () { //do something }
-
2.선택된 대답은 위에서 작동하지 않습니다.
선택된 대답은 위에서 작동하지 않습니다.
typingTimer이 occassionaly 여러 번 설정되어 있기 때문에 다음이 제대로 지우지 않습니다 (를 keyDown가 빠른 typers 등에 트리거되기 전에의 keyup 두 번 누름).
영업 이익은 요청대로 종료 후 해결할 수있는 문제 아래의 솔루션이 문제와 X 초를 호출합니다. 또한 더 이상 중복를 keyDown 기능을 필요로하지 않습니다. 또한 귀하의 의견이 비어있는 경우 함수 호출이 발생하지 않도록 검사를 추가했습니다.
//setup before functions var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms (5 seconds) //on keyup, start the countdown $('#myInput').keyup(function(){ clearTimeout(typingTimer); if ($('#myInput').val()) { typingTimer = setTimeout(doneTyping, doneTypingInterval); } }); //user is "finished typing," do something function doneTyping () { //do something }
그리고 바닐라 자바 스크립트 솔루션에서 동일한 코드 :
//setup before functions let typingTimer; //timer identifier let doneTypingInterval = 5000; //time in ms (5 seconds) let myInput = document.getElementById('myInput'); //on keyup, start the countdown myInput.addEventListener('keyup', () => { clearTimeout(typingTimer); if (myInput.value) { typingTimer = setTimeout(doneTyping, doneTypingInterval); } }); //user is "finished typing," do something function doneTyping () { //do something }
이 솔루션은 ES6를 사용하지하지만 여기 필요는 없습니다. 그냥 VAR 및 일반 기능 화살표 기능을하게 대체합니다.
-
3.그것은 underscore.js 디 바운스 기능을 하나 개의 라인이다 :
그것은 underscore.js 디 바운스 기능을 하나 개의 라인이다 :
$('#my-input-box').keyup(_.debounce(doSomething , 500));
이것은 기본적으로 500 밀리 초 I 정지 입력 한 후 해봐요을 말한다.
추가 정보를 원하시면 : http://underscorejs.org/#debounce
-
4.예, 말 2 각 초 아약스 요청을 발사하는 이벤트까지 모든 키의 시간 제한을 설정할 수 있습니다. 또한 더욱 당신이 대역폭을 저장하므로 후속 키 누르기 이벤트에 XHR 방법과 중단을 저장할 수 있습니다. 여기에 내가 내 자동 완성 스크립트 작성했습니다 뭔가.
예, 말 2 각 초 아약스 요청을 발사하는 이벤트까지 모든 키의 시간 제한을 설정할 수 있습니다. 또한 더욱 당신이 대역폭을 저장하므로 후속 키 누르기 이벤트에 XHR 방법과 중단을 저장할 수 있습니다. 여기에 내가 내 자동 완성 스크립트 작성했습니다 뭔가.
var timer; var x; $(".some-input").keyup(function () { if (x) { x.abort() } // If there is an existing XHR, abort it. clearTimeout(timer); // Clear the timer so we don't end up with dupes. timer = setTimeout(function() { // assign timer a new timeout x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel) }, 2000); // 2000ms delay, tweak for faster/slower });
도움이 되었기를 바랍니다,
마르코
-
5.
var timer; var timeout = 1000; $('#in').keyup(function(){ clearTimeout(timer); if ($('#in').val) { timer = setTimeout(function(){ //do stuff here e.g ajax call etc.... var v = $("#in").val(); $("#out").html(v); }, timeout); } });
여기에 전체 예 : http://jsfiddle.net/ZYXp4/8/
-
6.두 정상이 답변 나를 위해 작동하지 않습니다. 그래서, 여기 내 솔루션입니다 :
두 정상이 답변 나를 위해 작동하지 않습니다. 그래서, 여기 내 솔루션입니다 :
var timeout = null; $('#myInput').keyup(function() { clearTimeout(timeout); timeout = setTimeout(function() { //do stuff here }, 500); });
-
7.늦은 대답하지만 2019의이 꽤 ES6, 아니 타사 라이브러리를 사용하여 완전히 달성, 나는 높은 평가 답변의 대부분은 부피가 너무 많은 변수가 아래로 무게가 있습니다 찾을 수 있기 때문에 나는 그것을 추가 해요.
늦은 대답하지만 2019의이 꽤 ES6, 아니 타사 라이브러리를 사용하여 완전히 달성, 나는 높은 평가 답변의 대부분은 부피가 너무 많은 변수가 아래로 무게가 있습니다 찾을 수 있기 때문에 나는 그것을 추가 해요.
이 훌륭한 블로그 게시물에서 가져온 우아한 솔루션입니다.
function debounce(callback, wait) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(function () { callback.apply(this, args) }, wait); }; } window.addEventListener('keyup', debounce( () => { // code you would like to run 1000ms after the keyup event has stopped firing // further keyup events reset the timer, as expected }, 1000))
-
8.나는 초현실적 인 꿈의 대답하지만 같은 당신이 정말로 신속하게 "안녕하세요"를 입력하면 내 "doneTyping"기능 즉, 모든 키를 누를 때 해고 것으로 나타났습니다; 대신 입력을 중지 할 때 한 번 발사의 함수는 5 번 해고.
나는 초현실적 인 꿈의 대답하지만 같은 당신이 정말로 신속하게 "안녕하세요"를 입력하면 내 "doneTyping"기능 즉, 모든 키를 누를 때 해고 것으로 나타났습니다; 대신 입력을 중지 할 때 한 번 발사의 함수는 5 번 해고.
문제는 자바 스크립트의 setTimeout 함수를 덮어 쓰거나 설정된 오래된 시간 제한을 죽일 나타나지 않습니다,하지만 당신이 그것을 스스로 할 경우 작동한다! 난 그냥 단지에서는 setTimeout 전에 사항 clearTimeout 호출을 추가하도록 typingTimer이 설정되어있는 경우. 아래를 참조하십시오 :
//setup before functions var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms, 5 second for example //on keyup, start the countdown $('#myInput').on("keyup", function(){ if (typingTimer) clearTimeout(typingTimer); // Clear if already set typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //on keydown, clear the countdown $('#myInput').on("keydown", function(){ clearTimeout(typingTimer); }); //user is "finished typing," do something function doneTyping () { //do something }
N.B. 난 그냥 초현실적 인 꿈의 대답에 주석으로이 추가 좋았을 것이다 그러나 나는 새 사용자를 해요 충분한 명성을 필요가 없습니다. 죄송합니다!
-
9.허용 대답을 수정하면 같은 붙여 넣기 등의 추가 사례를 처리하기 위해 :
허용 대답을 수정하면 같은 붙여 넣기 등의 추가 사례를 처리하기 위해 :
//setup before functions var typingTimer; //timer identifier var doneTypingInterval = 2000; //time in ms, 2 second for example var $input = $('#myInput'); // updated events $input.on('input propertychange paste', function () { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //user is "finished typing," do something function doneTyping () { //do something }
-
10.다음 지연 함수를 선언 :
다음 지연 함수를 선언 :
var delay = (function () { var timer = 0; return function (callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })()
다음을 사용 :
let $filter = $('#item-filter'); $filter.on('keydown', function () { delay(function () { console.log('this will hit, once user has not typed for 1 second'); }, 1000); });
-
11.나는 (내가 틀렸다면 왜 말해주세요) keyDown 이벤트는이 경우에 필요하다 생각하지 않습니다. 그런 내 (비 JQuery와) 스크립트 유사한 솔루션 모습에서 :
나는 (내가 틀렸다면 왜 말해주세요) keyDown 이벤트는이 경우에 필요하다 생각하지 않습니다. 그런 내 (비 JQuery와) 스크립트 유사한 솔루션 모습에서 :
var _timer, _timeOut = 2000; function _onKeyUp(e) { clearTimeout(_timer); if (e.keyCode == 13) { // close on ENTER key _onCloseClick(); } else { // send xhr requests _timer = window.setTimeout(function() { _onInputChange(); }, _timeOut) } }
나는이 사람, 언젠가는 도움이되기를 바랍니다, 그래서 그것은 스택 오버플로 내 첫 번째 답변입니다 :)
-
12.의 @going 대답에 동의합니다. 나를 위해 일한 또 다른 유사한 솔루션은 아래의 하나입니다. 유일한 차이점은 내가 대신의 keyup의 (... "입력") CSTE 연구진 사용하고 있다는 점이다. 이 단지 캡처 입력으로 변경합니다. Ctrl 키와 같은 다른 키 등 시프트 무시됩니다
의 @going 대답에 동의합니다. 나를 위해 일한 또 다른 유사한 솔루션은 아래의 하나입니다. 유일한 차이점은 내가 대신의 keyup의 (... "입력") CSTE 연구진 사용하고 있다는 점이다. 이 단지 캡처 입력으로 변경합니다. Ctrl 키와 같은 다른 키 등 시프트 무시됩니다
var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms (5 seconds) //on input change, start the countdown $('#myInput').on("input", function() { clearTimeout(typingTimer); typingTimer = setTimeout(function(){ // doSomething... }, doneTypingInterval); });
-
13.음, 엄격하게 사용자가 완성 된 입력이있는 경우 컴퓨터가 추측 할 수 없기 때문에, 더 말할 수 없습니다. 당신은 물론 키를 백업에 타이머를 발사하고, 이후의 모든 키를 백업에 재설정 할 수있다. 타이머가 만료되면, 사용자는 타이머 기간 동안 입력하지 않은 - 당신은 "완성 된 입력"을 호출 할 수 있습니다.
음, 엄격하게 사용자가 완성 된 입력이있는 경우 컴퓨터가 추측 할 수 없기 때문에, 더 말할 수 없습니다. 당신은 물론 키를 백업에 타이머를 발사하고, 이후의 모든 키를 백업에 재설정 할 수있다. 타이머가 만료되면, 사용자는 타이머 기간 동안 입력하지 않은 - 당신은 "완성 된 입력"을 호출 할 수 있습니다.
당신은 사용자가 입력하는 동안 일시 정지를 만들기 위해 기대한다면, 그들은이 완료되면 알 수있는 방법이 없습니다.
(그들은이 완료되면 물론하지 않는 한 당신은 데이터에서 알 수 있습니다)
-
14.솔루션이 입력 이벤트와 다소 조금 간단 같은 느낌 :
솔루션이 입력 이벤트와 다소 조금 간단 같은 느낌 :
var typingTimer; var doneTypingInterval = 500; $("#myInput").on("input", function () { window.clearTimeout(typingTimer); typingTimer = window.setTimeout(doneTyping, doneTypingInterval); }); function doneTyping () { // code here }
-
15.난 그냥 마무리 입력에 대한 사용자 기다려야하는 간단한 코드를 알아 낸 :
난 그냥 마무리 입력에 대한 사용자 기다려야하는 간단한 코드를 알아 낸 :
사용자가 입력 인 경우 null로 밖으로 단계 1.set 시간은 현재 시간 제한을 취소합니다.
의 keyup 이벤트가 트리거되기 전에 변수에 단계 2.trigger 명확한 시간 제한을 정의합니다.
가변하는 단계 3.define 시간 제한은 상기 선언;
<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/> <div class="data"></div>
자바 스크립트 코드
var textInput = document.getElementById('input'); var textdata = document.querySelector('.data'); // Init a timeout variable to be used below var timefired = null; // Listen for keystroke events // Init a timeout variable to be used below var timefired = null;// Listen for keystroke events textInput.onkeyup = function (event) { clearTimeout(timefired); timefired = setTimeout(function () { textdata.innerHTML = 'Input Value:'+ textInput.value; }, 600); };
-
16.내 목록에서 검색을 구현하고 아약스를 기반으로 그것을 필요로했다. 모든 키의 변화에 결과를 검색하는 것이 그 수단이 업데이트 표시되어야합니다. 많은 아약스 호출에이 결과는 좋은 일하지 않은, 서버로 전송.
내 목록에서 검색을 구현하고 아약스를 기반으로 그것을 필요로했다. 모든 키의 변화에 결과를 검색하는 것이 그 수단이 업데이트 표시되어야합니다. 많은 아약스 호출에이 결과는 좋은 일하지 않은, 서버로 전송.
일부 작업 후, 사용자가 입력을 중지 할 때 서버를 ping 할 수있는 방법을했다.
이 솔루션은 나를 위해 일한 :
$(document).ready(function() { $('#yourtextfield').keyup(function() { s = $('#yourtextfield').val(); setTimeout(function() { if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing. $.ajax({ type: "POST", url: "yoururl", data: 'search=' + s, cache: false, beforeSend: function() { // loading image }, success: function(data) { // Your response will come here } }) } }, 1000); // 1 sec delay to check. }); // End of keyup function }); // End of document.ready
이 작업을 실행하는 동안 모든 타이머를 사용할 필요가 없다는 것을 알 수 있습니다.
-
17.이것은 내가 쓴 간단한 JS 코드입니다 :
이것은 내가 쓴 간단한 JS 코드입니다 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head><title>Submit after typing finished</title> <script language="javascript" type="text/javascript"> function DelayedSubmission() { var date = new Date(); initial_time = date.getTime(); if (typeof setInverval_Variable == 'undefined') { setInverval_Variable = setInterval(DelayedSubmission_Check, 50); } } function DelayedSubmission_Check() { var date = new Date(); check_time = date.getTime(); var limit_ms=check_time-initial_time; if (limit_ms > 800) { //Change value in milliseconds alert("insert your function"); //Insert your function clearInterval(setInverval_Variable); delete setInverval_Variable; } } </script> </head> <body> <input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" /> </body> </html>
-
18.당신은 텍스트 상자가 포커스를 잃을 때 감지하기 위해 onblur 이벤트를 사용할 수 있습니다 : https://developer.mozilla.org/en/DOM/element.onblur
당신은 텍스트 상자가 포커스를 잃을 때 감지하기 위해 onblur 이벤트를 사용할 수 있습니다 : https://developer.mozilla.org/en/DOM/element.onblur
"입력을 멈춘"당신은 사용자 유형 잔뜩 다음 텍스트 상자에이 앉아 여전히 초점을 맞추고 사건에 대해 걱정하는 경우 즉, 같은 아니에요.
나는 온 클릭 이벤트에의 setTimeout을 매는없이 키 입력과 시간의 X 금액 후, 사용자가 입력을 중지한다고 가정 제안 것이라고하십시오.
-
19.이유는 단지 onfocusout 사용하지?
이유는 단지 onfocusout 사용하지?
https://www.w3schools.com/jsreF/event_onfocusout.asp
이 폼의 경우, 항상 더 입력이 onfocusout 이벤트 핸들러가 호출 받고 놓치지 않을 것이다 알 수 있도록 제출 버튼을 클릭하기 위해 모든 입력 필드의 초점을 남겨 둘 것이다.
-
20.현장에서 멀리 이동하는 사용자에 대한 필요성이 있다면, 우리는 자바 스크립트에서 "및 onblur"대신 onchange를 사용할 수 있습니다
현장에서 멀리 이동하는 사용자에 대한 필요성이 있다면, 우리는 자바 스크립트에서 "및 onblur"대신 onchange를 사용할 수 있습니다
<TextField id="outlined-basic" variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />
그가 아닌 경우 필요한 설정 타이머가 좋은 옵션이 될 것입니다.
-
21.텍스트 상자에 초점을 감지하면, 키에 최대 타임 아웃 점검을하고, 그것을 트리거 될 때마다 다시 설정합니다.
텍스트 상자에 초점을 감지하면, 키에 최대 타임 아웃 점검을하고, 그것을 트리거 될 때마다 다시 설정합니다.
타임 아웃이 완료, 당신의 아약스 요청을 수행 할 때.
-
22.당신은 (예 : 우편 번호 필드로) 특정 길이를 찾는 경우 :
당신은 (예 : 우편 번호 필드로) 특정 길이를 찾는 경우 :
$("input").live("keyup", function( event ){ if(this.value.length == this.getAttribute('maxlength')) { //make ajax request here after. } });
-
23.확실하지 내 요구는 단지 어떤 이상한의,하지만 난이 비슷한 무언가를 필요로하고 이것이 내가 사용하는 결국 어떤 경우 :
확실하지 내 요구는 단지 어떤 이상한의,하지만 난이 비슷한 무언가를 필요로하고 이것이 내가 사용하는 결국 어떤 경우 :
$('input.update').bind('sync', function() { clearTimeout($(this).data('timer')); $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) { if(x.success != true) { triggerError(x.message); } }, 'json'); }).keyup(function() { clearTimeout($(this).data('timer')); var val = $.trim($(this).val()); if(val) { var $this = $(this); var timer = setTimeout(function() { $this.trigger('sync'); }, 2000); $(this).data('timer', timer); } }).blur(function() { clearTimeout($(this).data('timer')); $(this).trigger('sync'); });
어느 날 내 응용 프로그램이 같은 요소를 가지고 있습니다 :
<input type="text" data-url="/controller/action/" class="update">
어떤 사용자가 "완료 입력"(2 초 동안 아무런 조치)이 없거나 다른 필드로 갈 때 업데이트됩니다 (요소 중 흐림)
-
24.사용자가 입력 사용 간단한이 완료 될 때까지 대기해야하는 경우 :
사용자가 입력 사용 간단한이 완료 될 때까지 대기해야하는 경우 :
$(document).on('change','#PageSize', function () { //Do something after new value in #PageSize });
내 호출기에 대해이 작업 - - 아약스 호출로 전체 예제 목록 당 항목 수 :
$(document).ready(function () { $(document).on('change','#PageSize', function (e) { e.preventDefault(); var page = 1; var pagesize = $("#PageSize").val(); var q = $("#q").val(); $.ajax({ url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })', data: { q: q, pagesize: pagesize, page: page }, type: 'post', datatype: "json", success: function (data) { $('#tablecontainer').html(data); // toastr.success('Pager has been changed', "Success!"); }, error: function (jqXHR, exception) { ShowErrorMessage(jqXHR, exception); } }); }); });
-
25.다른 모든 답은 하나의 제어 (내 다른 대답 포함)에 대한 작동합니다. 당신은 여러 컨트롤 페이지 당 (예를 들어 쇼핑 카트에) 사용자 입력 뭔가가 불려가는 마지막 컨트롤이있는 경우. 내 경우에는이 확실히달라고 행동하지 않습니다 - 각 컨트롤은 자신의 타이머를 가져야한다.
다른 모든 답은 하나의 제어 (내 다른 대답 포함)에 대한 작동합니다. 당신은 여러 컨트롤 페이지 당 (예를 들어 쇼핑 카트에) 사용자 입력 뭔가가 불려가는 마지막 컨트롤이있는 경우. 내 경우에는이 확실히달라고 행동하지 않습니다 - 각 컨트롤은 자신의 타이머를 가져야한다.
이 문제를 해결하기 위해, 당신은 단순히 함수에 ID를 전달하고 timeoutHandles는 다음 코드와 같이 사전을 유지해야한다 :
함수 선언 :
var delayUserInput = (function () { var timeoutHandles = {}; return function (id, callback, ms) { if (timeoutHandles[id]) { clearTimeout(timeoutHandles[id]); } timeoutHandles[id] = setTimeout(callback, ms); }; })();
기능 사용법 :
delayUserInput('yourID', function () { //do some stuff }, 1000);
-
26.간단하고 이해하기 쉽다.
간단하고 이해하기 쉽다.
var mySearchTimeout; $('#ctl00_mainContent_CaseSearch').keyup(function () { clearTimeout(mySearchTimeout); var filter = $(this).val(); mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700); return true; });
-
27.ES6 구문과 함께 함수에 매개 변수를 전달하십시오.
ES6 구문과 함께 함수에 매개 변수를 전달하십시오.
$(document).ready(() => { let timer = null; $('.classSelector').keydown(() => { clearTimeout(timer); timer = setTimeout(() => foo('params'), 500); }); }); const foo = (params) => { console.log(`In foo ${params}`); }
-
28.와우, 심지어 3 개의 댓글이 꽤 정확!
와우, 심지어 3 개의 댓글이 꽤 정확!
편집 나는 어떤 사람들은 준비 코드를 복사 붙여 넣기 할 가능성이없는 지시를 이해하지 못하는 것을 알 수있다. 당신이있어 이곳까지
var typingTimer; // 2 $("#myinput").on('input', function () { // 4 3 var input = $(this).val(); clearTimeout(typingTimer); // 5 typingTimer = setTimeout(function() { // do something with input alert(input); }, 5000); });
from https://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 아약스 요청은 200 OK를 반환하지만 오류 이벤트가 대신 성공 해고 (0) | 2020.09.27 |
---|---|
[JQUERY] 때 자바 스크립트 동기는 무엇입니까? (0) | 2020.09.27 |
[JQUERY] 변수는 AJAX 함수에서 반환되지 않습니다 (0) | 2020.09.27 |
[JQUERY] jQuery를이 : 텍스트에 의한 요소를 찾을 수 (0) | 2020.09.27 |
[JQUERY] JQuery와 AJAX를 사용하여 HTML 양식을 제출 (0) | 2020.09.27 |