Skip to content

Instantly share code, notes, and snippets.

@UziTech
Created March 26, 2015 16:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save UziTech/f82d945763e0cf9929b2 to your computer and use it in GitHub Desktop.
Save UziTech/f82d945763e0cf9929b2 to your computer and use it in GitHub Desktop.
Add x to input fields to erase content
/**
* DWTFYW License
* Author: Tony Brix, http://tonybrix.info
*
* Usage:
* $("input").erasable();
*/
(function ($) {
var defaults = {
//align: "right"
};
$.erasable = function (element, options) {
var $input = $(element);
var $wrap = $input.wrap("<div class='erasable'></div>").parent();
var $button = $("<div class='erasable-button'></div>").appendTo($wrap);
var settings = $.extend({}, defaults, options, {
display: $input.css("display")
});
$wrap.css({
display: settings.display,
position: "relative",
margin: 0,
padding: 0
}).hover(function () {
$button.css({
opacity: 1
});
}, function () {
$button.css({
opacity: 0
});
});
$button.css({
position: "absolute",
top: 4,
right: 4,
margin: 0,
padding: 0,
width: 11,
height: 14,
background: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAOCAYAAAArMezNAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAEqSURBVDhPjZIhcgJBEEURCGQEYkUkggNEICMQyAgkB9gjICLikQhEJEeI4AgrIiIQiMiIyAgEImLz/1R312fYDHTVq+3p/2ere2Z6bdveDOIevID5P/rE9PGFWAIxAN/gl5s7tE9wBJUXOztBRAdSWwAmu8y7tPpzWltRO5labQiiA/+BaQ1got4fQP8g1cTsnexBH2xsnTpQEA+m5d5ZeLINr2ZYA3Z/Nq6CKHpzcwU4EhcnMFJdQRS9uZljcTwueOZ3qiuIojc312Z8t+9KdQVR9KqRF8Kz+gJ8JR+AQlyIeP0VqJd74zjU7E9oYetHQPMB9N1nmr8C9TKJC3TjkwlbF6zOG2dSS80nazLvG2CSJgzhVhA+2SSrj0BMeLbpGojOyUS3CXv1H0J3OCOpILLmAAAAAElFTkSuQmCC') 0px 0px no-repeat",
cursor: "pointer",
transition: ".2s opacity",
opacity: 0
}).hover(function () {
$(this).addClass("erasable-hover").css({
backgroundPosition: "-11px 0px"
});
}, function () {
$(this).removeClass("erasable-hover").css({
backgroundPosition: "0px 0px"
});
}).click(function () {
$input.val("");
});
};
$.fn.erasable = function (options) {
return this.each(function () {
var $this = $(this);
if ($this.is("input") && !$this.is("[type='radio'], [type='checkbox']")) {
$.erasable(this, options);
}
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment