Gmail/Google 문서 richtext WYSIWYG edtior에서 "변경/제거 링크"와 같은 것을 구현하려고합니다. URL을 입력하면 div가 표시됩니다. 아래쪽에 "Goto Link, Change, Remote"가 표시됩니다.jQuery 텍스트 영역 커서/캐럿 X, Y 위치 및 DIV 아래에 표시
jQuery를 사용하여 어떻게 작성할 수 있습니까?
미리 감사드립니다.
답변 : http://jsfiddle.net/morrison/57BR3/
가 무엇을 :
이하지 않는 무엇 : 텍스트 영역에
@Levi는 훌륭하게 작동하지만 $ body.delegate ('# main a', 'click', function (e) {..}를 사용하는 특별한 이유가 있습니다. ..... 대신에 간단한 $ ('# main a')를 사용하는 대신 click()? –
네, 사실 당신의 방법은 여러 개의 이벤트 핸들러를 만듭니다. 내 방법은 하나 있습니다. 내가 실수로 그 코드 조각을 피들에서 제거했지만, 지금 돌아왔다. #main에 바인딩하면 클릭이 제대로 작동하지 않는다. $ body.delegate를 $ ('main ') 그리고 실패 할 것입니다. 왜 그런지 이해하지 못했을 것입니다. 해결할 수 있다면, 해결책을 찾아 주시길 바랍니다. –
@Levi Morrison 고마워요. 코드에서 많은 것을 배울 수 있습니다.하지만 아시나요? 커서 위치를 계산하는 방법은?내 질문은 VisualStudio/Eclipse에서 자동 완성/자동 제안 드롭 다운 메뉴와 같은 것을 만들려고 했으므로 IE와 다른 브라우저에서 커서 앞에 전체 "단어"를 가져야했습니다. 예를 들어, 텍스트 영역에'window.'라고 입력하면, 커서는'.' 다음에 머물러 있습니다. 그러나 커서 앞에 가장 가까운 텍스트를 가져와야합니다 :'window', 일부 AJAX 호출과 함께 단어 아래 div를 표시 할 수 있습니다 '창'과 사용자는 품목의 명부에서 무언가를 선택할 수있다. – est
WYSIWYG 편집기를 만드는 것이 좋습니다. 텍스트 영역을 사용 하시겠습니까? Textareas는 HTML을 지원하지 않습니다. later comment에 응답하려면 텍스트 영역에서 캐럿의 (x, y) 위치를 얻는 가장 좋은 방법은 textarea-caret-position plugin을 사용하는 것입니다.
지금까지 무엇을 얻었습니까? – alex
Google 검색 결과를 보면 대다수가별로 도움이되지 못했습니다. – est
WYSIWYG 편집기를 만들 것을 제안합니다. 'textarea'를 사용 하시겠습니까? Textareas는 HTML을 지원하지 않습니다. –