Jquery click event at end of textbox

Question

Is there any chance of firing click event when user clicks at end of text box for up to 30px padding-right? I have a background image at end of textbox. I have situation that I can not add background icon as div and append to right end of text box.

keep the click on complete textbox and do something like this: `if(e.pageX - (your width)){ /* code here */ }` (_I am not good with maths_) — Mr_Green, Mar 14 '14 at 10:22
Why you don't append the html you need where you need it and then add the event listener to it? — MentalRay, Mar 14 '14 at 10:24

score 1 · Answer 1 · answered Mar 14 '14 at 10:33

Try this:

var text = document.getElementsByClassName('text')[0];
text.onclick = function(e){
    var el = e.currentTarget;
    var width = el.offsetWidth;
    var x = el.offsetLeft;
    var x1 = e.pageX;
    if(x1 > (x + width - 30)){   // 30 is padding-right value
        alert("hello");
    }
}

Working Fiddle

score 0 · Answer 2 · answered Mar 14 '14 at 10:28

<div class="textbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat vitae dui sit amet dignissim. Mauris laoreet ultrices libero. Fusce justo lacus, ultricies et egestas ultrices, ultrices et metus. Aenean at rutrum nibh, imperdiet interdum lectus. Pellentesque in neque luctus, pulvinar dui non, lobortis urna. Nulla imperdiet congue felis quis euismod. Pellentesque tempus ornare porta. Ut sit amet nibh non dui hendrerit placerat at sit amet tellus. Phasellus ut est justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sit amet urna quis quam facilisis tempor. Sed ut eleifend risus, in elementum ligula.
</div>

$('.textbox').append('<a href="#">Press me</a>');
$('.textbox a').click(function() {
  alert( "Handler for .click() called." );
});

http://jsfiddle.net/KGy48/

Jquery click event at end of textbox

2 Answers2