JQuery - 检测表单中的更改并还原

Question

我正在尝试检测用户对表单所做的任何更改。

1. 如果表单已更改，则显示保存按钮
2. 如果用户将表单放回原始表单，请隐藏保存按钮

这是我正在努力解决的第二个问题，但我怀疑这是我对第一个问题的态度。以前有人这样做过吗？

Answer 1

您可以通过data-*属性将数据保存在每个输入表单元素中，并在input事件触发时检查每个输入元素。例如，HTML:

<input type="text" data-value="initial-value" value="initial-value">

JS:

$( 'form' ).on( 'input', ':input', function(e) {
var $form = $(e.delegateTarget);
var edited = false;
$form.find( ':input' ).each( function() {
var $this = $( this );
if ( $this.val() === $this.data( 'value' ) ) {
return;
}
$( '#save-btn' ).show();
edited = true;
return false;
} );
if ( !edited ) {
$( '#save-btn' ).hide();
}
} );

Answer 2

让我们试试这个例子，

HTML

<input id="yourInput" type="text" data-value="hello" value="hello">
<input id="yourButton"type="button" value="Submit" hidden>

Jquery

$('#yourInput').on("change paste keyup", function() {
if($('#yourInput').val() != $('#yourInput').attr("data-value"))
{ $( '#yourButton' ).show(); }
else
{ $( '#yourButton' ).hide(); }
});

通过使用这个代码示例，输入的默认值是"hello"。如果您在其中键入不同的值，则会显示该按钮
如果您再次键入默认值"hello"，该按钮将被隐藏
希望这个样品能对你有所帮助。