사용자가 키업 대신 입력을 마치면 자바 스크립트 기능을 실행 하시겠습니까?

사용자가 텍스트 상자에 입력을 마치면 ajax 요청을 트리거하고 싶습니다. 사용자가 문자를 입력 할 때마다 많은 수의 아약스 요청이 발생하기 때문에 함수를 실행하고 싶지는 않지만 입력 버튼을 누르지 않아도됩니다.

사용자가 입력을 마친 후 감지하고 ajax 요청을 수행 할 수있는 방법이 있습니까?

여기에 jQuery를 사용하십시오! 데이브

그래서, 타이핑 완료는 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
}

위에서 선택한 답변이 작동하지 않습니다.

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을 사용하지만 여기서는 필요하지 않습니다. 그냥 교체 let로 var하고 정기적 기능 화살표 기능.

underscore.js debounce 함수 가있는 한 줄 입니다 .

$('#my-input-box').keyup(_.debounce(doSomething , 500));

이것은 기본적으로 입력을 중단 한 후 500 밀리 초의 doSomething을 말합니다 .

자세한 정보 : http://underscorejs.org/#debounce

예, 각각의 모든 키업 이벤트에 대해 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);
});

나는 초현실적 인 꿈의 답변을 좋아하지만 "doneTyping"기능은 모든 키를 누를 때마다 작동합니다. 입력을 중지 할 때 한 번만 발사하는 대신이 함수는 5 번 발사됩니다.

문제는 javascript setTimeout 함수가 설정된 이전 시간 초과를 덮어 쓰거나 종료하지 않는 것처럼 보이지만 직접 수행하면 작동합니다! typingTimer가 설정된 경우 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
}

NB 나는 이것을 Surreal Dream의 답변에 대한 의견으로 방금 추가하고 싶었지만 새로운 사용자이며 평판이 충분하지 않습니다. 죄송합니다!

붙여 넣기와 같은 추가 사례를 처리하도록 허용 된 답변 수정 :

//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
}

이 경우 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)
    }

}

스택 오버플로에 대한 첫 번째 답변이므로 언젠가 누군가에게 도움이되기를 바랍니다.)

다음 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);
});    

늦은 답변이지만 2019 년이기 때문에 추가하고 있습니다.이 라이브러리는 타사 라이브러리가없는 예쁜 ES6을 사용하여 완전히 달성 할 수 있으며 높은 등급의 답변은 대부분 부피가 커서 너무 많은 변수로 인해 무게가 줄어 듭니다.

이 훌륭한 블로그 게시물 에서 가져온 우아한 솔루션 입니다.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, 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))

컴퓨터는 사용자가 입력을 마치면 추측 할 수 없으므로 엄격히 아니오입니다. 물론 키업시 타이머를 작동시키고 이후의 모든 키에서 타이머를 재설정 할 수 있습니다. 타이머가 만료되면 사용자가 타이머 지속 시간 동안 입력하지 않은 것입니다. "종료 된 입력"이라고 부를 수 있습니다.

사용자가 입력하는 동안 일시 정지 할 것으로 예상되는 경우 언제 완료했는지 알 수있는 방법이 없습니다.

(물론 데이터가 완료되면 알 수 없다면)

나는 솔루션이 input이벤트 와 함께 약간 더 단순하다고 생각합니다 .

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

@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);
});

방금 사용자가 입력을 마칠 때까지 기다리는 간단한 코드를 찾았습니다.

단계 1. 시간 초과를 null로 설정 한 다음 사용자가 입력 할 때 현재 시간 초과를 지우십시오.

2 단계. 키업 이벤트가 트리거되기 전에 변수 정의에 대한 지우기 시간 초과를 트리거합니다.

3 단계. 위에서 선언 한 변수에 타임 아웃을 정의합니다.

<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);
};

내 리스팅에서 검색을 구현하고 있었고 아약스 기반이어야했습니다. 즉, 모든 키 변경시 검색 결과가 업데이트되고 표시되어야합니다. 이로 인해 서버로 전송되는 많은 아약스 호출이 발생하지만 이는 좋지 않습니다.

몇 가지 작업을 한 후 사용자가 입력을 멈출 때 서버를 핑하는 방법을 찾았습니다.

이 솔루션은 저에게 효과적이었습니다.

$(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

이를 구현하는 동안 타이머를 사용할 필요가 없습니다.

이것은 내가 쓴 간단한 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>

onblur 이벤트를 사용하여 텍스트 상자에 포커스가없는시기를 감지 할 수 있습니다. https://developer.mozilla.org/en/DOM/element.onblur

사용자가 많은 것을 입력 한 다음 텍스트 상자가 계속 초점을 맞춘 상태로 앉아있는 경우를 염두에 두는 경우 "입력 중지"와 동일하지 않습니다.

이를 위해 setTimeout을 onclick 이벤트에 연결하고 x 키 시간이 없으면 키 입력이 없으면 사용자가 입력을 중지했다고 가정합니다.

왜 onfocusout을 사용하지 않습니까?

https://www.w3schools.com/jsreF/event_onfocusout.asp

양식 인 경우 제출 단추를 클릭하기 위해 항상 모든 입력 필드에 초점을두고 onfocusout 이벤트 핸들러를 호출 할 때 입력이 누락되지 않습니다.

사용자가 현장에서 벗어나야하는 경우 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       
});

아약스 호출에 대한 완전한 예제-내 호출기에 작동-목록 당 항목 수 :

$(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);
            }
        });  
    });
});    

페이지 당 여러 타이머

다른 모든 답변은 하나의 컨트롤 에서만 작동합니다 ( 다른 답변 포함). 페이지 당 여러 컨트롤이있는 경우 (예 : 장바구니) 사용자가 무언가를 입력 한 마지막 컨트롤 만 호출 됩니다. 필자의 경우 이것은 분명히 원하는 동작이 아닙니다-각 컨트롤에는 자체 타이머가 있어야합니다.

이 문제를 해결하려면 다음 코드와 같이 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);

간단하고 이해하기 쉽습니다.

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}`);
}

와우, 3 개의 의견조차도 꽤 정확합니다!

1. 빈 입력은 함수 호출을 건너 뛰는 이유가 아닙니다. 예를 들어 리디렉션 전에 URL에서 낭비 매개 변수를 제거합니다.

2. .on ('input', function() { ... });트리거로 사용되어야한다 keyup, paste및 change이벤트

3. 반드시 .val()또는 .value사용해야 함

4. 여러 입력으로 작업하는 $(this)대신 내부 이벤트 기능을 사용할 수 있습니다#id

5. (내 결정) 내가 대신 익명 함수를 사용 doneTyping에 setTimeout쉽게 액세스 $(this)N.4에서,하지만 당신은 처음처럼을 저장해야var $currentInput = $(this);

편집 일부 사람들은 준비된 코드를 복사하여 붙여 넣을 수없는 지시를 이해하지 못합니다. 여기있어

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);      
});