입력 jQuery는 변경 전에 이전 값을 얻고 변경 후에는 값을 가져옵니다.

입력 jQuery는 변경 전에 이전 값을 얻고 변경 후에는 값을 가져옵니다.

저는.input textjQuery에서 나는 그것의 가치를 얻는 것이 가능한지 알고 싶습니다.input text(type=number그리고.type=text)이전에onchange를 실행하고 또한 on 변경이 실행된 후 동일한 입력 텍스트의 값을 가져옵니다.jQuery를 사용하고 있습니다.

시도한 내용:

변수에 값을 저장했다가 변경 시 내부에 해당 값을 호출하려고 했는데 빈 값이 나옵니다.

가장 간단한 방법은 다음을 사용하여 원래 값을 저장하는 것입니다.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/

위임된 이벤트는 이벤트를 청취하여 작업합니다(focusin,change등) 상위 요소(document* 이 경우), jQuery 필터를 적용합니다(input버블 체인의 요소에만 함수를 적용한 다음 이벤트를 발생시킨 일치 요소에만 함수를 적용합니다.

*참고: 일반적인 규칙, 용도document위임된 이벤트의 기본값으로 지정되며 지정되지 않음body.body스타일과 관련된 버그가 있어 마우스 이벤트가 거품이 나지 않을 수 있습니다.또한.document항상 존재하므로 DOM 준비 처리기 외부에서 연결할 수 있습니다 :)

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

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

Gone Coding의 답변과 같이 초점을 맞추기 전의 값을 취할 수 있습니다.하지만 여러분은 집중하지 않고 가치를 바꿀 수 있다는 것을 명심해야 합니다.

텍스트 상자를 만들 때 초기 값을 데이터 속성에 입력하면 됩니다.

HTML

<input id="my-textbox" type="text" data-initial-value="6" value="6" /> 

제이쿼리

$("#my-textbox").change(function () {
 var oldValue = $(this).attr("data-initial-value");
 var newValue = $(this).val();
});

"Select2" 플러그인에서도 작동하는 솔루션을 찾았습니다.

function functionName() {
  $('html').on('change', 'select.some-class', function() {
    var newValue = $(this).val();
    var oldValue = $(this).attr('data-val');
    if ( $.isNumeric(oldValue) ) { // or another condition
      // do something
    }
    $(this).attr('data-val', newValue);
  });
  $('select.some-class').trigger('change');
}

오늘 이 질문을 발견했는데, 왜 이렇게 단순하게 구현하지 않고 이렇게 복잡하게 만들어졌는지 잘 모르겠습니다.

var input = $('#target');
var inputVal = input.val();
input.on('change', function() {
  console.log('Current Value: ', $(this).val());
  console.log('Old Value: ', inputVal);
  inputVal = $(this).val();
});

여러 입력을 대상으로 하려면 각 기능을 사용합니다.

$('input').each(function() {
  var inputVal = $(this).val();
  $(this).on('change', function() {
    console.log('Current Value: ',$(this).val());
    console.log('Old Value: ', inputVal);
    inputVal = $(this).val();
});

나의 해결책은 여기에 있습니다.

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

선호하는 솔루션은 일부 상황에서는 효과가 있지만 이상적인 솔루션은 아닙니다.보젠드라 라우니야르가 제공한 솔루션은 특정 시나리오에서만 작동합니다.var inputVal은 항상 동일하게 유지되므로 입력을 여러 번 변경하면 함수가 끊어집니다.

html 번호 입력 시 ▲▼ (위/아래) 스피너로 인해 포커스 사용 시 기능이 중단될 수 있습니다.그래서 J.T.테일러가 최선의 해결책을 가지고 있습니다.데이터 특성을 추가하면 다음과 같은 문제를 방지할 수 있습니다.

<input id="my-textbox" type="text" data-initial-value="6" value="6" />

현재 값만 필요하고 위의 옵션이 작동하지 않는 경우 이 방법으로 사용할 수 있습니다.

$('#input').on('change', () => {
  const current = document.getElementById('input').value;
}

저의 사업 목표는 이전 입력에서 클래스를 제거하고 새로운 클래스에 추가하는 것이었습니다.
이 경우 간단한 해결책이 있습니다. 추가하기 전에 모든 입력에서 클래스를 제거하는 것입니다.

<div>
   <input type="radio" checked><b class="darkred">Value1</b>
   <input type="radio"><b>Value2</b>
   <input type="radio"><b>Value3</b>
</div>

그리고.

$('input[type="radio"]').on('change', function () {
   var current = $(this);
   current.closest('div').find('input').each(function () {
       (this).next().removeClass('darkred')
   });
   current.next().addClass('darkred');
});

JsFiddle: http://jsfiddle.net/gkislin13/tybp8skL

select droplist와 jquery code를 찾는다면 다음과 같습니다.

var preValue ="";
//get value when click select list
$("#selectList").click(
    function(){
        preValue =$("#selectList").val();
    }
);

$("#selectList").change(
    function(){
        var curentValue = $("#selectList").val();
        var preValue = preValue;
        console.log("current:"+curentValue );
        console.log("old:"+preValue );
    }
);

언급URL : https://stackoverflow.com/questions/29118178/input-jquery-get-old-value-before-onchange-and-get-value-after-on-change