키를 올리는 대신 사용자가 입력을 마치면 javascript 기능을 실행하시겠습니까?
사용자가 텍스트 상자에 입력을 마치면 Ajax 요청을 트리거합니다.사용자가 문자를 입력할 때마다 기능을 실행하지 않았으면 합니다.그러면 AJAX의 요구가 많아지기 때문입니다만, 입력 버튼을 누를 필요도 없습니다.
사용자가 입력을 끝냈을 때 이를 감지하고 Ajax 요청을 할 수 있는 방법이 있습니까?
여기서 jQuery 사용 중!
그러니까 타이핑을 끝낸다는 건 잠시 멈추는 거예요, 5초 정도요.이 점에 유의하여 사용자가 키를 놓으면 타이머를 시작하고 키를 누르면 클리어합니다.문제의 입력은 #myInput으로 결정했습니다.
몇 가지 가정을 해보자면...
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 5000; //time in ms, 5 seconds 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
}
위에서 선택한 답변이 작동하지 않습니다.
typingTimer는 여러 번 설정되어 있기 때문에(빠른 타이퍼의 경우 키 다운이 트리거되기 전에 키를 두 번 누름) 제대로 지워지지 않습니다.
다음 솔루션은 이 문제를 해결하고 OP가 요청한 대로 종료된 후 X를 호출합니다.또, 용장 키 다운 기능도 불필요하게 되었습니다.입력이 비어 있는 경우 함수 호출이 발생하지 않도록 체크도 추가했습니다.
//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
}
또한 바닐라 JavaScript 솔루션에서도 동일한 코드가 사용됩니다.
//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를 사용하지만 여기서는 필요하지 않습니다.교환만 하면 됩니다.letvar화살표는 규칙적인 기능을 가지고 있습니다.
언더스코어.js 디바운스 함수가 있는 행은 다음과 같습니다.
$('#my-input-box').keyup(_.debounce(doSomething , 500));
기본적으로 타이핑을 멈춘 후 500밀리초 후에 무언가를 하라고 되어 있습니다.
상세한 것에 대하여는, http://underscorejs.org/ #http://http://underscorejs.org/ 를 참조해 주세요.
답변이 늦었지만 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))
네, Ajax 요청을 실행하는 각 키 업 이벤트에 대해 예를 들어 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
});
이게 도움이 됐으면 좋겠는데
마르코
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/
상위 2개의 답변은 모두 저에게 맞지 않습니다.제 해결책은 다음과 같습니다.
var timeout = null;
$('#myInput').keyup(function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
//do stuff here
}, 500);
});
승인된 답변을 수정하여 붙여넣기 등의 추가 사례를 처리합니다.
//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
}
과 같이 하세요.delay★★★★
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);
});
Surreal Dream의 답변은 마음에 들지만, "done Typing" 기능은 모든 키를 누를 때마다 작동한다는 것을 알았습니다. 즉, "Hello"를 정말 빨리 입력하면 입력이 중단될 때 한 번만 울리는 것이 아니라, 5번 울립니다.
문제는 javascript set Timeout 함수가 설정되어 있는 오래된 타임아웃을 덮어쓰거나 종료하지 않는 것처럼 보이지만, 직접 실행하면 동작한다는 것입니다!따라서 typeTimer가 설정되어 있는 경우 setTimeout 직전에 clearTimeout 콜을 추가했을 뿐입니다.아래를 참조해 주세요.
//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. Surretary Dream의 답변에 댓글을 달았으면 좋았을 텐데, 저는 새로운 사용자라서 평판이 좋지 않습니다.미안!
이 경우 key down 이벤트는 필요하지 않다고 생각합니다(잘못된 경우 이유를 알려주세요).(논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)
}
}
Stack Overflow에 대한 첫 번째 답변이므로 언젠가 도움이 되었으면 합니다.
@going의 대답에 동의하다나에게 효과가 있었던 또 다른 유사한 솔루션은 다음과 같습니다.유일한 차이점은 키업 대신 .on("input...")을 사용한다는 것입니다.이것은 입력의 변경만을 캡처합니다.Ctrl, Shift 등의 다른 키는 무시됩니다.
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);
});
목록에서 검색을 구현하고 있었는데, Ajax 기반이어야 했습니다.즉, 키를 변경할 때마다 검색 결과를 업데이트하고 표시해야 합니다.이로 인해 서버에 다수의 Ajax 콜이 송신됩니다.이것은 좋은 일이 아닙니다.
작업 후 사용자가 입력을 멈추면 서버에 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
이것을 실장하는 동안 타이머를 사용할 필요가 없다는 것을 알 수 있습니다.
const inText = document.getElementById('inText')
const outText = document.getElementById('outText')
const delay = 1000
let timer
inText.addEventListener('input', code => {
clearTimeout(timer);
timer = setTimeout(x => {
outText.innerHTML = inText.value
}, delay, code)
})<textarea id='inText'>edit this and...</textarea>
<pre id='outText'>see the results after you stop typing for one second</pre>음, 엄밀히 말하면 안 된다. 왜냐하면 컴퓨터는 사용자가 타이핑을 끝냈을 때를 추측할 수 없기 때문이다.물론 키를 올릴 때 타이머를 기동해, 그 후의 키를 올릴 때마다 리셋 할 수 있습니다.타이머가 만료되면 사용자가 타이머 기간을 입력하지 않은 것입니다. "입력 완료"라고 할 수 있습니다.
입력 중에 사용자가 일시 중지하기를 기대하는 경우, 사용자가 언제 완료되었는지 알 수 없습니다.
(물론 데이터를 통해 언제 완료되었는지 알 수 있는 경우를 제외하고)
input 이벤트 표시:
var typingTimer;
var doneTypingInterval = 500;
$("#myInput").on("input", function () {
window.clearTimeout(typingTimer);
typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});
function doneTyping () {
// code here
}
사용자가 입력을 마칠 때까지 기다리는 간단한 코드를 방금 알아냈습니다.
스텝 1. 타임아웃을 null로 설정한 후 사용자가 입력할 때 현재 타임아웃을 지웁니다.
스텝 2. 트리거 키업 이벤트가 트리거되기 전에 변수 정의에 대한 타임아웃을 클리어합니다.
위에서 선언한 변수에 대한 스텝 3.120 타임아웃
<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>
javascript 코드
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);
};
다음은 제가 작성한 간단한 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>
왜 포커스 아웃을 사용하지 않는 거죠?
https://www.w3schools.com/jsreF/event_onfocusout.asp
폼일 경우, 전송 버튼을 클릭하기 위해 항상 모든 입력 필드의 포커스를 남겨두기 때문에 포커스 아웃이벤트 핸들러를 호출할 때 입력이 누락되지 않습니다.
onblur 이벤트를 사용하여 텍스트 상자의 포커스를 잃었을 때 검출할 수 있습니다.https://developer.mozilla.org/en/DOM/element.onblur
사용자가 많은 내용을 타이핑한 다음 텍스트 상자에 초점을 맞춘 채 앉아 있는 경우를 신경 쓴다면 이는 "Stops Typing"과 같지 않습니다.
그러기 위해서는 onclick 이벤트에 set Timeout을 관련지을 것을 권장합니다.키 스트로크가 없는 x시간 후에 사용자가 입력을 정지했다고 가정합니다.
페이지당 여러 타이머
다른 모든 답변은 한 컨트롤에서만 작동합니다(다른 답변도 포함).페이지당 여러 개의 컨트롤이 있는 경우(예: 장바구니 내) 사용자가 입력한 마지막 컨트롤만 호출됩니다.내 경우 이것은 확실히 바람직한 행동이 아니다 - 각각의 제어장치에는 자체 타이머가 있어야 한다.
이 문제를 해결하려면 함수에 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);
사용자가 필드에서 벗어나야 할 경우 Javascript에서 Onchange 대신 onBlur를 사용할 수 있습니다.
<TextField id="outlined-basic" variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />
이것이 필요하지 않은 경우 타이머를 설정하는 것이 좋습니다.
텍스트 상자에 포커스가 있는 것을 검출하면, 키 업시에 타임 아웃 체크를 실시해, 기동할 때마다 리셋 합니다.
타임아웃이 완료되면 ajax 요청을 수행합니다.
특정 길이(우편 번호 필드 등)를 찾고 있는 경우:
$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
//make ajax request here after.
}
});
제 욕구가 좀 이상한지 모르겠지만, 저는 이것과 비슷한 것이 필요했고 결국 이렇게 되었습니다.
$('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초 동안 작업 없음) 또는 다른 필드로 이동(요소에서 삭제됨)할 때 업데이트됩니다.
사용자의 입력이 완료될 때까지 기다려야 하는 경우 다음과 같이 단순하게 입력합니다.
$(document).on('change','#PageSize', function () {
//Do something after new value in #PageSize
});
ajax 콜의 완전한 예 - 호출기에 대해 작업 - 목록당 항목 수:
$(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);
}
});
});
});
심플하고 알기 쉽다.
var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
clearTimeout(mySearchTimeout);
var filter = $(this).val();
mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
return true;
});
ES6 구문과 함께 매개변수를 함수에 전달합니다.
$(document).ready(() => {
let timer = null;
$('.classSelector').keydown(() => {
clearTimeout(timer);
timer = setTimeout(() => foo('params'), 500);
});
});
const foo = (params) => {
console.log(`In foo ${params}`);
}
Angular를 찾는 사람이 있다면 단도직입적으로 대답할 수 없다.JS 솔루션나는 이곳의 인기 있는 해결책에 따라 지시문을 작성했다.
app.directive("ngTypeEnds", ["$timeout", function ($timeout) {
return function (scope, element, attrs) {
var typingTimer;
element.bind("keyup", function (event) {
if (typingTimer)
$timeout.cancel(typingTimer);
if (angular.element(element)[0].value) {
typingTimer = $timeout(function () {
scope.$apply(function () {
scope.$eval(attrs.ngTypeEnds);
});
}, 500);
}
event.preventDefault();
});
};
}]);
Javascript에서 폐쇄에 대해 들어봤나?
매우 심플하고 간단합니다.현재 입력값을 setTimeOut 함수가 닫는 오래된 값과 비교하기만 하면 됩니다.
let timer;
$('#myInput').on('keyup', function() {
window.clearTimeout(timer);
// here is the closures javascript magic happens.
const value = $(this).val();
timer = setTimeout(() => {
if(value === $(this).val() && $(this).val()!== ''){
alert($(this).val());
}
}, 500);
})
언급URL : https://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up
'programing' 카테고리의 다른 글
| 템플릿의 Angular 2 해시태그는 무엇을 의미합니까? (0) | 2022.12.27 |
|---|---|
| MySQL Workbench에서 EER 다이어그램을 확대하는 방법 (0) | 2022.12.27 |
| $date + 1년? (0) | 2022.12.27 |
| MySQL보다 느린 MariaDB 그룹 (0) | 2022.12.27 |
| Java에서 날짜가 두 날짜 사이인지 확인하려면 어떻게 해야 합니까? (0) | 2022.12.27 |