a에서 jQuery Change 이벤트a에서 jQuery Change 이벤트요소 - 이전 값을 유지할 수 있는 방법이 있습니까?요소 - 이전 값을 유지할 수 있는 방법이 있습니까?

a에서 jQuery Change 이벤트요소 - 이전 값을 유지할 수 있는 방법이 있습니까?

오늘 아침에 찾아봤는데 간단한 해결책이...기본적으로 입력 요소의 변화를 포착하고 싶지만 이전 값도 알고 싶습니다.

여기에 변경 이벤트와 가장 간단한 형태의 입력 요소가 있습니다.분명히 $(elem.val()로 새 값을 얻을 수 있습니다만 이전 값을 얻는 데 누락된 은밀한 방법이 있습니까?jQuery API에서 이것을 할 수 있는 것이 보이지 않지만, 누군가가 이미 이것을 했고 몇 가지 팁이 있습니까?

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            //var oldvalue = ???
            var newvalue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

저는 제 해결책을 쓰는 것을 반대하는 것이 아니라, 단지 제가 여기서 바퀴를 재현하는 것이 아니라는 것을 확인하고 싶습니다.

더 나은 접근 방식은 .data를 사용하여 이전 값을 저장하는 것입니다.이를 통해 멀리해야 하는 전역 변수를 생성할 시간을 절약하고 요소 내에 캡슐화된 정보를 유지할 수 있습니다.Global Vars가 나쁜 이유에 대한 실제 사례가 여기에 문서화되어 있습니다.

예

<script>
    //look no global needed:)

    $(document).ready(function(){
        // Get the initial value
       var $el = $('#myInputElement');
       $el.data('oldVal',  $el.val() );


       $el.change(function(){
            //store new value
            var $this = $(this);
            var newValue = $this.data('newVal', $this.val());
       })
       .focus(function(){
            // Get the value when input gains focus
            var oldValue = $(this).data('oldVal');
       });
    });
</script>
<input id="myInputElement" type="text">

이렇게 하면 효과가 있을 수 있습니다.

$(document).ready(function() {
    $("input[type=text]").change(function() {
        $(this).data("old", $(this).data("new") || "");
        $(this).data("new", $(this).val());
        console.log($(this).data("old"));
        console.log($(this).data("new"));
    });
});

데모 여기

$('#element').on('change', function() {
    $(this).val($(this).prop("defaultValue"));
});

포커스가 입력 필드를 벗어날 때마다 숨겨진 필드에 입력 필드의 값을 복사할 수 있습니다(원하는 작업을 수행해야 합니다.아래 코드 참조:

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            var newvalue = $(this).val();
        });
        $('#myInputElement').blur(function(){
            $('#myHiddenInput').val($(this).val());
        });
    });
</script>
<input id="myInputElement" type="text">

(테스트되지 않았지만 작동할 것입니다.)

모든 DOM 요소에는 defaultValue라는 속성이 있습니다.데이터의 첫 번째 변경 내용을 비교하려는 경우에는 이 값을 사용하여 기본값을 얻을 수 있습니다.

러스에서 그는 포커스 이벤트를 묶습니다.꼭 그럴 필요는 없다고 생각합니다.

변경 이벤트에 이전 값을 저장할 수 있습니다.

<script>
    $(document).ready(function(){

        var newValue = $('#myInputElement').val();
        var oldValue;

        $('#myInputElement').change(function(){
            oldValue = newValue;
            newValue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

몇 점.

$.fn.data 대신 $.data 사용

// regular
$(elem).data(key,value);
// 10x faster
$.data(elem,key,value);

그러면 생활을 복잡하게 하지 않고 이벤트 객체를 통해 이전 값을 얻을 수 있습니다.

    $('#myInputElement').change(function(event){
        var defaultValue = event.target.defaultValue;
        var newValue = event.target.value;
    });

defaultValue는 마지막 설정 값이 아닙니다.필드가 초기화된 값입니다.하지만 $.data를 사용하여 "오래된 가치"를 추적할 수 있습니다.

이벤트 핸들러 기능에서 항상 "이벤트" 개체를 선언하고 파이어버그(console.log(이벤트)) 등으로 검사하는 것을 권장합니다.jquery 객체를 만들거나 액세스하는 것을 막아주는 유용한 것들을 많이 발견할 수 있을 것입니다. (그것도 좋지만, 더 빨리 할 수 있다면...)

조이 게라의 제안으로 이런 기능들을 개발했습니다, 감사합니다.조금 더 자세히 설명하고 있습니다, 아마 누군가가 사용할 수 있을 겁니다.첫 번째 함수 checkDefaults()는 입력이 변경될 때 호출되고, 두 번째 함수는 jQuery.post 을 사용하여 양식을 제출할 때 호출됩니다. div. updatesubmit은 my submit 버튼이고, class ' needsupdate'는 업데이트가 이루어졌지만 아직 제출되지 않았음을 나타내는 표시입니다.

function checkDefaults() {
    var changed = false;
        jQuery('input').each(function(){
            if(this.defaultValue != this.value) {
                changed = true;
            }
        });
        if(changed === true) {
            jQuery('div.updatesubmit').addClass("needsupdate");
        } else {
            jQuery('div.updatesubmit').removeClass("needsupdate");
        }
}

function renewDefaults() {
        jQuery('input').each(function(){
            this.defaultValue = this.value;
        });
        jQuery('div.updatesubmit').removeClass("needsupdate");
}

더러운 속임수를 찾았지만 작동합니다. 호버 기능을 사용하여 변경 전 값을 얻을 수 있습니다!

언급URL : https://stackoverflow.com/questions/1159046/jquery-change-event-on-an-input-element-any-way-to-retain-previous-value