jQuery에 '입력 텍스트'가 있는데 '변경'이 발생하기 전에 해당 '입력 텍스트'(유형 = 숫자
및 유형 = 텍스트
)의 값을 가져오고 변경이 발생한 후 동일한 입력 텍스트의 값도 가져올 수 있는지 알고 싶습니다. 이것은 jQuery를 사용하고 있습니다.
내가 시도한 것:
변수에 값을 저장 한 다음 온 체인지 내에서 해당 값을 호출하려고 시도했지만 빈 값이 표시됩니다.
가장 간단한 방법은 요소가 포커스를 받을 때 data()
를 사용하여 원래 값을 저장하는 것입니다. 다음은 아주 기본적인 예시입니다:
JSFiddle:
$('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:
65/위임된 이벤트는 조상 요소(이 경우 문서
)에서 이벤트(포커스인
, 변경
등)를 수신한 다음, 버블 체인의 요소에만 jQuery 필터(입력
)를 적용한 다음 이벤트를 일으킨 일치하는 요소에만 함수를 *적용하는 방식으로 작동합니다.
참고: 일반적으로 위임된 이벤트에는 body
가 아닌 document
를 기본값으로 사용합니다. body에는 스타일링과 관련된 버그가 있어 마우스 이벤트가 버블링되지 않을 수 있습니다. 또한
document`는 항상 존재하므로 DOM 준비 핸들러* 외부에서 첨부할 수 있습니다.)
물론 관심 있는 순간(초점 맞추기 전, 마지막 변경 시점)에 따라 이전 값을 수동으로 저장해야 할 수도 있습니다. 초기 값은 defaultValue 속성에서 가져올 수 있습니다:
function onChange() {
var oldValue = this.defaultValue;
var newValue = this.value;
}
초점을 맞추기 전의 값은 Gone Coding의 답변에 표시된 대로 가져올 수 있습니다. 그러나 초점을 맞추지 않고도 값을 변경할 수 있다는 점을 명심해야 합니다.
내 솔루션은 여기 있습니다.
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;
});
그냥 동일팔레트에 초기 값을 텍스트 데이터 속성이 붙여넣습니다 만들 때, 예:
<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();
});