Question

我有一些HTML，并且想要在单击段落时创建输入字段。这没问题，但是我还希望文本光标移动到点击发生的地方。当然，这可以通过再次单击来完成，但我希望只需单击即可完成此操作。

在创建输入字段后使用第一个单击事件触发另一个事件会很好，这将（希望）使用第一个事件的鼠标坐标将文本光标移动到正确的位置。这可能吗？

我正在使用jquery，所以如果这样更容易，请将它用于你的答案。谢谢你的帮助！

Answer 1

这是一个近似的解决方案。它的工作原理是计算文本中字符数，文本宽度和相对鼠标偏移量的近似字符偏移量。

设置光标位置的功能（一旦我们计算出来）来自https://stackoverflow.com/a/841121/1961666

$.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);
});

（如果你计算每个角色的宽度并考虑到这一点，你可以获得更好的精确度，如果它很重要的话。）

在与第一个相同的位置触发额外的鼠标单击事件

1 个答案: