Trigger extra mouse click event in same location as first

Question

I have some html, and want to create an input field when clicking a paragraph. That is no problem, but then I'd also like the text cursor to move where the click occured. This can be done simply by clicking again of course, but I'd like this to happen in a single click.

It would be nice to use the first click event to trigger another right after the input field has been created, which would (hopefully) use the mouse coordinates of the first event to move the text cursor to the correct location. Is this possible?

I'm using jquery, so if that makes it easier, please use it for your answer. Thanks for your help!

You can't move a mouse cursor with javascript. You could "click" the original item to place the focus where it was but not the actual pointer. — ryan, Dec 20 '13 at 19:41
I don't want to move the mouse, as stated I want to use/copy one event to reuse its properties. — ciscoheat, Dec 20 '13 at 19:50

score 1 · Accepted Answer · edited May 23 '17 at 12:11

Here's an approximate solution. It work by calculating the approximate character offset from the number of characters in the text, the width of the text and the relative mouse-offset.

The function for setting the cursor position (once we calculated it) comes from https://stackoverflow.com/a/841121/1961666

http://jsfiddle.net/4LmZ9/

$.fn.selectRange = function(start, end) {
    if(!end) end = start; 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

$('span').on('click', function(evt)
{
    var left = $(this).offset().left;
    var width = $(this).width();
    var clen = $(this).text().length;
    var offset = parseInt((evt.pageX - left)/width * clen);
    $(this).replaceWith($('<input />').val($(this).html()));
    $('input').trigger('focus').selectRange(offset);
});

(You can get better precision if you calculate the width of each character and taking that into account, if it's important.)

Trigger extra mouse click event in same location as first

1 Answers1