Question

情况如下：我有一个可编辑的文本区域。当用户选择文本区域并进行更改时，会出现一个保存按钮。当他们单击文本区域时，按钮会消失，如果他们进行了更改，他们会收到一个警告，询问他们是否要保存更改。但是，如果他们单击“保存”按钮，我不希望显示警报，并且我希望通过附加到按钮的onclick事件来触发保存功能。即使按下保存按钮，以下代码也会发出警报，并且不会运行保存按钮的onClick代码。使这项工作的最佳方法是什么？感谢!!!

$(".userNoteTextArea").focus(function() {
$("#noteTextAreaButtons").show();
}).bind('focusout', function(event) {
if (!$(event.target).is('#noteTextAreaButtons')) {
    $("#noteTextAreaButtons").hide();
    if (stillNotSaved == true) {
        if (confirm("Save changes?")) { //Ok button pressed...
            storeUserNote2(); //save note
        }
    }
}
});

保存按钮代码：

<div id="noteTextAreaButtons" style="display:none;"><input id="saveUserNoteButton" class="buttonAutoWide opaque" type="button" value="Saved" onClick="storeUserNote2(); this.value='Saved'"/></div>

修改：此文件可在http://gospelriver.com/favhymns/favhymns_temp.html查看。单击“我的歌曲”按钮。

Answer 1

包括以下新功能

function SaveClicked(){
    stillNotSaved = false;
    storeUserNote2(); 
    this.value='Saved';
}

我希望您使用的stillNotSaved变量是js中的global variable。并修改您的input代码，如下所示。

<input id="saveUserNoteButton" class="buttonAutoWide opaque" 
            type="button" value="Saved" onClick="SaveClicked();"/>

Answer 2

我认为我最终可能会忘记整个按钮的方法，只需在进行更改后退出文本区域时使用自动提示 - 确定=保存，取消=放弃更改。

仅在用户单击某个元素时才防止模糊/聚焦事件

2 个答案: