JSFiddle - React, Tailwind, and code Playground
CSS
textarea {
resize: none; /* annoying crap */
}
body, a, input, textarea { font: 14px Georgia; color: #555; }
JavaScript
// jQuery BoxIcon 1.0.0
//
// USAGE
// $(selector).boxicon(config);
(function($){
$.fn.boxicon = function(settings){
// default settings
var config={
"in" : "fadeIn",
"out" : "fadeOut",
"speed" : "fast",
"css" : { "right" : "4px" },
"html" : "X",
"click" : function(){
// general purposes functionality for clearing a field element
$(this).val('').removeAttr('checked').removeAttr('selected').keyup();
}
};
// merge settings
if(settings)$.extend(config, settings);
// do the magic
$(this).each(function(){
// the current element
var self=$(this);
// surround input with a container
var ctr=$('<span style="position: relative; display: inline-block; overflow: hidden;" class="boxicon-wrap"/>');
$(this).wrap(ctr);
// create button, set contents and put after input
var btn=$('<a style="position: absolute;" class="boxicon-btn" href="javascript:;"/>');
btn.css(config.css).html(config.html);
self.after(btn);
// handle clicking of button
if(config.click)btn.click(function(){ config.click.apply(self); });
// handle value changes of input
self.keyup(function(){
if (self.val().length > 0) {
btn[config["in"]](config.speed);
} else {
btn[config["out"]](config.speed);
}
});
// trigger initial state
self.keyup();
});
// chaining
return this;
};
})(jQuery);
// Actual Example:
$(document).ready(function(){
// throw some elements in document
$(document.body).append('<input type="text" id="textbox" value="hello world"/>');
$(document.body).append('<br/><br/>'); //...