Created
March 26, 2015 16:28
-
-
Save UziTech/f82d945763e0cf9929b2 to your computer and use it in GitHub Desktop.
Add x to input fields to erase content
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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