背景：一個網站需要一個獨特的多選工具，用戶點擊一個文本輸入，它會啟動一個包含一系列可選復選框的模式彈出視窗。當該模態關閉時，無論是通過單擊“保存”、右上角的 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 () {用戶的復選框選擇存盤到模式關閉時的輸入欄位的功能。
任何幫助或幫助將不勝感激。
uj5u.com熱心網友回復：
試試默認值
const workArea = $('#preset-work-area')[0]; // DOM element
if (workArea.value != workArea.defaultValue) {
alert('Text input values have changed'));
}
你可以然后當你快樂的時候，做
workArea.defaultValue = workArea.value
保存以供以后測驗
Als 不會在單擊時添加事件偵聽器
$('#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
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478979.html
標籤：javascript html jQuery