Cách nhận Giá trị cũ với sự kiện onchange () trong hộp văn bản

85

Tôi có một Hộp văn bản và một Giá trị được điền trong đó khi tải trang. Bây giờ Nếu người dùng ký tự bất kỳ thứ nào trong hộp văn bản, thì tôi muốn nhận Giá trị đã thay đổi (Giá trị mới) và Giá trị cũ nhưng khi tôi thực hiện ELEMENT.value thì giá trị của nó chỉ được thay đổi

bất kỳ đề xuất để nhận được giá trị cũ?

dưới đây là mã của tôi

<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>

Cảm ơn trước

javascript html validation

— CFUser
nguồn

69

element.defaultValue sẽ cung cấp cho bạn giá trị ban đầu.

Xin lưu ý rằng điều này chỉ hoạt động trên giá trị ban đầu.

Nếu bạn đang cần điều này để duy trì giá trị "cũ" mỗi khi nó thay đổi, thuộc tính expando hoặc phương pháp tương tự sẽ đáp ứng nhu cầu của bạn

— George
nguồn

chỉ là một ghi chú. Tôi đã phát hiện ra trên firefox element.getAttribute ("value") dường như cũng tiết lộ bản gốc ... Tôi không biết đủ để biết liệu đây có phải là một thứ xuyên trình duyệt / tiêu chuẩn hay không.

— cheshirekow

47

element.defaultValue trả về giá trị được đặt trong thẻ <input>. Nếu giá trị này đã thay đổi bằng cách chỉnh sửa hoặc một số JavaScript, phần tử, defaultValue khác sẽ không trả về giá trị cũ (mới) này.

— SabreWolfy

Cảm ơn SabreWolfy, đã phát hiện bình luận của bạn và giải quyết vấn đề của tôi. Đã phải thay đổi giá trị nhiều lần vì vậy làm như trên là không tốt.

175

Bạn sẽ cần lưu trữ giá trị cũ theo cách thủ công. Bạn có thể lưu trữ nó theo nhiều cách khác nhau. Bạn có thể sử dụng một đối tượng javascript để lưu trữ các giá trị cho mỗi hộp văn bản hoặc bạn có thể sử dụng một trường ẩn (tôi không khuyên bạn nên dùng nó - html quá nặng), hoặc bạn có thể sử dụng thuộc tính expando trên chính hộp văn bản, như sau:

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

Sau đó, hàm javascript của bạn để xử lý thay đổi sẽ trông như thế này:

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

— Gabriel McAdams
nguồn

24

Tôi có thể hiểu rằng bạn bỏ phiếu từ chối một câu trả lời nếu nó không hoạt động hoặc nếu nó là một câu trả lời không phù hợp. Tôi đã cung cấp một câu trả lời giải quyết được nhu cầu của người dùng. Mã này đã được thử nghiệm. Nó được hoàn thành. Và nó thực hiện điều gì đó mà câu trả lời được chấp nhận thì không (bạn luôn có thể xem thuộc tính defaultValue, nhưng điều gì sẽ xảy ra nếu người dùng thay đổi giá trị nhiều lần?).

— Gabriel McAdams

Thay đổi được đề xuất ở đây là không chính xác. Trước hết, một khi cảnh báo xảy ra, trường đã mất tiêu điểm. Mọi thay đổi sau đó sẽ xảy ra sau khi sự kiện onfocus được kích hoạt. Thứ hai, sự kiện trao đổi của trường đầu vào không kích hoạt cho đến khi mất tiêu điểm.

— Gabriel McAdams

2

Điều này hoạt động tốt hơn nếu bạn đang thao tác giá trị nhiều lần. Câu trả lời ở trên (element.defaultValue) chỉ hoạt động một lần. Up cái này :)

4

Đơn giản và hiệu quả. Ước gì tôi có thể cung cấp cho bạn nhiều hơn +1.

— Ian Kemp

1

@GrijeshChauhan: Không. Chúng tôi đang đặt giá trị cũ cho trọng tâm. Sau đó, cứ sau mỗi lần thay đổi, chúng tôi lại thiết lập lại.

— Gabriel McAdams,

6

Tôi sẽ đề nghị:

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

  //we have available old value here;
}

— krsnik
nguồn

6

Bạn nên sử dụng các thuộc tính dữ liệu HTML5. Bạn có thể tạo các thuộc tính của riêng mình và lưu các giá trị khác nhau trong chúng.

— tiwari.vikash
nguồn

2

Một thủ thuật bẩn thỉu mà tôi thường sử dụng, là ẩn các biến trong thuộc tính 'name' (tôi thường không sử dụng cho các mục đích khác):

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

Hơi bất ngờ, cả giá trị cũ và giá trị mới sau đó đều được gửi đến someFunction(oldValue,newValue)

— Jon
nguồn

7

Vâng, đó là bẩn!

— Alan Macdonald

2

Tôi không chắc, nhưng có lẽ logic này sẽ hoạt động.

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);
*/

— Manjeet
nguồn

2

Bạn có thể làm điều này: thêm thuộc tính oldvalue vào phần tử html, thêm set oldvalue khi người dùng nhấp vào. Sau đó, sự kiện trao đổi sử dụng giá trị cũ.

<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>

— Phạm Thái Sơn
nguồn

0

Có thể bạn có thể lưu trữ giá trị trước đó của hộp văn bản vào hộp văn bản ẩn. Sau đó, bạn có thể lấy giá trị đầu tiên từ ẩn và giá trị cuối cùng từ chính hộp văn bản. Một giải pháp thay thế liên quan đến điều này, tại sự kiện onfocus của hộp văn bản của bạn, đặt giá trị của hộp văn bản của bạn thành một trường ẩn và tại sự kiện onchange đọc giá trị trước đó.

— Canavar
nguồn

1

Nhưng, nếu chúng ta có hơn 100 hộp văn bản, trong trường hợp này chúng ta cần có hơn 100 biến ẩn, Vậy có cách nào khác để chúng ta có thể lấy các giá trị cũ không?

— CFUser

0

Có thể bạn có thể cố gắng lưu giá trị cũ với sự kiện "onfocus" để sau đó so sánh nó với giá trị mới với sự kiện "onchange".

— sở hữu
nguồn