jquery - How to make a clear x icon within top right of textarea on focus -
i using bootstrap 3 , know how make textarea clear x icon appear when user on focus youtube comment textarea.
use jquery focus/focusout show/hide icon. use background image that. http://api.jquery.com/focus/
and attach click event, checks in box user clicked. example, if between 0 , 10px right, assume clicked icon.
code should this:
$('#element').focus(function() { $(this).css('background', 'red'); }); $('#element').focusout(function() { $(this).css('background', 'white'); }); $('#element').click(function(e) { if (($(this).width()-(e.pagex - $(this).position().left)) < 10){ alert('clear textbox'); } });
or better, chained code:
$('#element').focus(function() { $(this).css('background', 'red'); }).focusout(function() { $(this).css('background', 'white'); }).click(function(e) { if (($(this).width()-(e.pagex - $(this).position().left)) < 20){ $(this).val(''); } });
Comments
Post a Comment