입력 jQuery 변경 전 이전 값 가져오기 및 변경 후 값 가져오기

jQuery에 '입력 텍스트'가 있는데 '변경'이 발생하기 전에 해당 '입력 텍스트'(유형 = 숫자 및 유형 = 텍스트)의 값을 가져오고 변경이 발생한 후 동일한 입력 텍스트의 값도 가져올 수 있는지 알고 싶습니다. 이것은 jQuery를 사용하고 있습니다.

내가 시도한 것:

변수에 값을 저장 한 다음 온 체인지 내에서 해당 값을 호출하려고 시도했지만 빈 값이 표시됩니다.

Dale K
편집된 질문4일 6월 2019 в 4:46
프로그래밍
javascript html jquery
18일 3월 2015 в 9:24
13 파운드
질문에 대한 의견 (2)
해결책

가장 간단한 방법은 요소가 포커스를 받을 때 data()를 사용하여 원래 값을 저장하는 것입니다. 다음은 아주 기본적인 예시입니다:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/

$('input').on('focusin', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
});

$('input').on('change', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

위임된 이벤트 핸들러를 사용하는 것이 좋습니다.

참고: 일반적으로 일치하는 요소가 여러 개 있을 수 있는 경우 위임된 이벤트 핸들러를 사용하는 것이 더 효율적입니다. 이렇게 하면 하나의 핸들러만 추가되므로(오버헤드가 적고 초기화가 빠르며) 이벤트 발생 시 속도 차이가 무시할 수 있을 정도로 작습니다.

다음은 'document'에 연결된 위임된 이벤트를 사용하는 동일한 예입니다:

$(document).on('focusin', 'input', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
}).on('change','input', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

JsFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/

위임된 이벤트는 조상 요소(이 경우 문서)에서 이벤트(포커스인, 변경 등)를 수신한 다음, 버블 체인의 요소에만 jQuery 필터(입력)를 적용한 다음 이벤트를 일으킨 일치하는 요소에만 함수를 *적용하는 방식으로 작동합니다.

참고: 일반적으로 위임된 이벤트에는 body가 아닌 document를 기본값으로 사용합니다. body에는 스타일링과 관련된 버그가 있어 마우스 이벤트가 버블링되지 않을 수 있습니다. 또한document`는 항상 존재하므로 DOM 준비 핸들러* 외부에서 첨부할 수 있습니다.)

Gone Coding
편집된 답변22일 6월 2017 в 2:25
해설 (7)

물론 관심 있는 순간(초점 맞추기 전, 마지막 변경 시점)에 따라 이전 값을 수동으로 저장해야 할 수도 있습니다. 초기 값은 defaultValue 속성에서 가져올 수 있습니다:

function onChange() {
    var oldValue = this.defaultValue;
    var newValue = this.value;
}

초점을 맞추기 전의 값은 Gone Coding의 답변에 표시된 대로 가져올 수 있습니다. 그러나 초점을 맞추지 않고도 값을 변경할 수 있다는 점을 명심해야 합니다.

mashi
편집된 답변18일 10월 2017 в 4:51
해설 (5)

내 솔루션은 여기 있습니다.

function getVal() {
    var $numInput =  $('input');
    var $inputArr = [];
    for(let i=0; i < $numInput.length ; i++ ) 
       $inputArr[$numInput[i].name] = $numInput[i].value;
    return $inputArr;
}
var $inNum =  getVal();
$('input').on('change', function() {
    // inNum is last Val
    $inNum =  getVal(); 
    // in here we update value of input
    let $val = this.value;      
});
Ehsan
편집된 답변28일 4월 2019 в 9:50
해설 (0)

그냥 동일팔레트에 초기 값을 텍스트 데이터 속성이 붙여넣습니다 만들 때, 예:

  • HTML *
<input id="my-textbox" type="text" data-initial-value="6" value="6" />
  • JQuery *
$("#my-textbox").change(function () {
 var oldValue = $(this).attr("data-initial-value");
 var newValue = $(this).val();
});
해설 (0)