programing

텍스트 상자에서 onchange () 이벤트로 이전 값을 얻는 방법

nasanasas 2020. 10. 13. 07:54
반응형

텍스트 상자에서 onchange () 이벤트로 이전 값을 얻는 방법


페이지가로드 될 때 텍스트 상자와 값이 채워져 있습니다. 이제 사용자가 텍스트 상자에서 어떤 것을 변경하면 변경된 값 (새 값)과 이전 값을 얻고 싶지만 ELEMENT.value를 수행하면 변경된 값만 제공됩니다.

오래된 가치를 얻으려는 제안?

아래는 내 코드입니다

<head>
    <script type="text/javascript">
      function onChangeTest(changeVal) {
        alert("Value is " + changeVal.value);
      }
    </script>
  </head>
  <body>
    <form>
      <div>
          <input type="text" id="test" value ="ABS" onchange="onChangeTest(this)">  
      </div>
    </form>
  </body>
</html>

미리 감사드립니다


element.defaultValue 당신에게 원래의 가치를 줄 것입니다.

이것은 초기 값에서만 작동합니다.

변경 될 때마다 "이전"값을 유지하기 위해이 값이 필요한 경우 expando 속성 또는 유사한 방법이 요구 사항을 충족합니다.


이전 값을 수동으로 저장해야합니다. 다양한 방법으로 저장할 수 있습니다. 자바 스크립트 객체를 사용하여 각 텍스트 상자의 값을 저장하거나 숨겨진 필드를 사용할 수 있습니다 (권장하지 않습니다-너무 html 무거움). 또는 다음과 같이 텍스트 상자 자체에 expando 속성을 사용할 수 있습니다.

<input type="text" onfocus="this.oldvalue = this.value;" onchange="onChangeTest(this);this.oldvalue = this.value;" />

그런 다음 변경을 처리하는 자바 스크립트 함수는 다음과 같습니다.

    <script type="text/javascript">
    function onChangeTest(textbox) {
        alert("Value is " + textbox.value + "\n" + "Old Value is " + textbox.oldvalue);
    }
    </script>

내가 제안 할게:

function onChange(field){
  field.old=field.recent;
  field.recent=field.value;

  //we have available old value here;
}

HTML5 데이터 속성을 사용해야합니다. 자신 만의 속성을 만들고 그 안에 다른 값을 저장할 수 있습니다.


내가 가끔 사용하는 더러운 속임수는 'name'속성에 변수를 숨기는 것입니다 (일반적으로 다른 목적으로 사용하지 않음).

select onFocus=(this.name=this.value) onChange=someFunction(this.name,this.value)><option...

예기치 않게 이전 값과 새 값이 모두 제출됩니다. someFunction(oldValue,newValue)


확실하지는 않지만이 논리가 작동 할 수도 있습니다.

var d = 10;
var prevDate = "";
var x = 0;
var oldVal = "";
var func = function (d) {
    if (x == 0 && d != prevDate && prevDate == "") {
        oldVal = d;
        prevDate = d;
    }
    else if (x == 1 && prevDate != d) {
        oldVal = prevDate;
        prevDate = d;
    }
    console.log(oldVal);
    x = 1;
};
/*
         ============================================
         Try:
         func(2);
         func(3);
         func(4);
*/

You can do this: add oldvalue attribute to html element, add set oldvalue when user click. Then onchange event use oldvalue.

<input type="text" id="test" value ="ABS" onchange="onChangeTest(this)" onclick="setoldvalue(this)" oldvalue="">

<script>
function setoldvalue(element){
   element.setAttribute("oldvalue",this.value);
}

function onChangeTest(element){
   element.setAttribute("value",this.getAttribute("oldvalue"));
}
</script>

Maybe you can store the previous value of the textbox into a hidden textbox. Then you can get the first value from hidden and the last value from textbox itself. An alternative related to this, at onfocus event of your textbox set the value of your textbox to an hidden field and at onchange event read the previous value.


Maybe you can try to save the old value with the "onfocus" event to afterwards compare it with the new value with the "onchange" event.

참고URL : https://stackoverflow.com/questions/1909992/how-to-get-old-value-with-onchange-event-in-text-box

반응형