JS檢測HTML輸入字段值變化（異常場景）

Question

背景：一個網站需要一個獨特的多選工具，用戶可以在其中單擊文本輸入，這會啟動一個包含一系列可選復選框的模式彈出窗口。 當該模式關閉時，通過單擊“保存”、右上角的 X 或簡單地在模式之外，他們的選擇將存儲到文本輸入字段中。

這是 JSFiddle 中的一個基本示例： https://jsfiddle.net/6x7ur3k2/1/

目標：我現在需要確定用戶何時更改了這個特定輸入文本字段的值。 因此，如果當用戶單擊以啟動模式時文本字段列出“A、B”，然后將選擇更改為 A、B 以外的任何內容，系統將檢測到這一點。 因此，我熟悉的一些檢測輸入字段值變化的方法在這里不起作用，因為它是 JS，而不是用戶，改變了值。

問題：我最初嘗試完成此操作包含兩個事件處理程序，一個附加到單擊將其值存儲到變量的文本輸入，然后另一個附加到模式關閉時，它將第一個值與新值進行比較並檢查差異。 但是，這不起作用。 此外，每次用戶單擊輸入文本字段時，都會附加一個新事件以關閉模式，我還沒有想出如何使用 off() 結束它而不刪除存儲所選復選框的事件處理程序作為模式被關閉/關閉時文本輸入字段中的值。 這是 JSFiddle JS 部分第 5 行的代碼$('.list-modal').on('hide.bs.modal', function () {

這是我嘗試檢測更改的代碼示例。 除了始終指示值已更改之外，它似乎在模態關閉時堆疊新的事件處理程序。

        $('#preset-work-area').on('click', function() {
            var content = $('#preset-work-area').val();
            $('#preset-work-area-modal').on('hide.bs.modal', function () {
                if ($('#preset-work-area').val() != value) {
                    alert('Text input values have changed'));
                }
            });
        });

如果我包括$('#preset-work-area').off(); ，它打破了$('.list-modal').on('hide.bs.modal', function () {它將用戶的復選框選擇存儲到模態關閉的輸入字段中。

此處的任何幫助或幫助將不勝感激。

Answer 1

試試默認值

 const workArea = $('#preset-work-area')[0]; // DOM element
 if (workArea.value != workArea.defaultValue) {
   alert('Text input values have changed'));
 }

你可以在你開心的時候做

workArea.defaultValue = workArea.value

保存以供以后測試

也不要在點擊時添加事件監聽器

$('#preset-work-area-modal').on('hide.bs.modal', function () {
   const workArea = $('#preset-work-area')[0]; // DOM element
   if (workArea.value != workArea.defaultValue) {
     alert('Text input values have changed'));
   }
});

$('#preset-work-area').on('click', function() {
  var content = $('#preset-work-area').val();
  // do something
});