첫 번째와 동일한 위치에서 추가 마우스 클릭 이벤트 트리거

Question

일부 html이 있고 단락을 클릭 할 때 입력 필드를 만들고 싶습니다. 문제는 없지만 클릭 한 위치로 텍스트 커서를 이동하고 싶습니다. 물론 다시 클릭하면됩니다. 단 한 번의 클릭으로 이런 일이 일어나길 바랍니다.

첫 번째 클릭 이벤트를 사용하여 입력 필드가 생성 된 후 첫 번째 클릭 이벤트를 사용하여 첫 번째 이벤트의 마우스 좌표를 사용하여 텍스트 커서를 올바른 위치로 이동시키는 것이 좋습니다. 이것이 가능한가?

jquery를 사용하고 있습니다. 더 쉽게 사용하려면 답변에 사용하십시오. 당신의 도움을 주셔서 감사합니다!

Answer 1

대략적인 해결책은 다음과 같습니다. 텍스트의 문자 수, 텍스트 너비 및 상대적인 마우스 오프셋으로부터 대략적인 문자 오프셋을 계산하여 작동합니다.

커서 위치를 설정하는 기능 (한 번 우리는 그것을 계산) 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); 
}); 

https://stackoverflow.com/a/841121/1961666

(당신은 각 문자의 폭에 그것을 복용을 계산하는 경우, 당신은 더 나은 정밀도를 얻을 수 있습니다에서 오는

계정, 중요하다면.)