Hide "save successful" message when user starts updating a page again

I have a page with a few textboxes and dropdowns. When I hit submit all the information on the page is saved and a "Save successful" message is sent to the client. However if the user starts updating the page again the message should go away. I don't want to add a on focus event to all the inputs since it can be a killer.开发者_StackOverflow中文版 Also I need to do this on all the pages in the app. Any help regarding this will be highly appreciated. Thanks!

---

Since you're working with jQuery...this is still essentially adding in that on focus event, but doing it as a global listener to all normal inputs (including checkboxes, hidden, radio, etc), instead of an event on each and every item.

$(':input').focus(function(){
   $('#successfullySavedId').hide();
});

---

How is the update triggered? If it's a post-back, use on page load and have it wait a few seconds and auto-hide. If it's ajax, add a timeout on the response to hide it after a few seconds.

---

You could use .delegate() and .blur() (which would trigger when things might have actually changed as opposed to when focus is gained) or .change() (for when things have actually changed). Delegate is written in such away that it takes away some of the performance hit.

$("form").delegate(":input", "change", function() {
    $("#saveSuccessDiv").hide();
});

---

Maybe it's not really what you're looking for, but i find jQuery's jGrowl plugin really nice to notify users about what's going on (your user shouln't care if the message persists for 5 seconds or until they start touching things again, shouldn't they?).

Otherwise, you can do as the others have suggested.