Skip to content

Instantly share code, notes, and snippets.

@MrAntix

MrAntix/form-loses-focus.htm

Last active January 1, 2016 07:49
Show Gist options
  • Save MrAntix/8113772 to your computer and use it in GitHub Desktop.
Save MrAntix/8113772 to your computer and use it in GitHub Desktop.
Download ZIP
callback when a form loses focus on all its inputs and links tab through the fields, as the form loses focus the callback sets the background to green here we check if the form is dirty (using https://github.com/snikch/jquery.dirtyforms) then we do a save
Raw
form-loses-focus.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>forms</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
form {
background-color:#eee;
color: #444;
padding: 1em;
margin: 1em;
}
fieldset{
padding:0;
border:none;
border-bottom:solid 1px #eee;
}
</style>
<script>
$(function () {
var formCallback = function () {
var $form = $(this).css({ backgroundColor: "#cfc" });
window.setTimeout(function () {
$form.css({ backgroundColor: "" });
}, 2000);
};
$("form").formBlur({
callback: formCallback
});
});
$.widget("antix.formBlur", {
options: {
timeout: 100,
callback: null
},
_create: function () {
var options = this.options;
this.element.each(function () {
var $form = $(this), timeout;
$form.focusout(function () {
timeout = window.setTimeout(function () {
options.callback.call($form[0]);
}, timeout);
});
$form.focusin(function () {
if (timeout) {
window.clearTimeout(timeout);
timeout = null;
}
});
});
},
destroy: function () {
$.Widget.prototype.destroy.call(this);
}
});
</script>
</head>
<body>
<form id="1">
<fieldset>
<legend>Form 1</legend>
<p>
<label>Input 1</label>
<input />
<a href="#">A Link</a>
</p>
<p>
<label>Input 2</label>
<input />
</p>
</fieldset>
</form>
<form id="2">
<fieldset>
<legend>Form 2</legend>
<p>
<label>Input 1</label>
<input />
</p>
<p>
<label>Input 2</label>
<input type="checkbox" />
</p>
</fieldset>
</form>
<form id="3">
<fieldset>
<legend>Form 3</legend>
<p>
<label>Input 1</label>
<input />
</p>
<p>
<label>Input 2</label>
<select><option></option><option>thing</option></select>
</p>
</fieldset>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment