jQuery 또는 JavaScript 텍스트 영역에서 선택된 텍스트를 강조 표시하는 방법

나는 Facebook이 어떻게하는지 알아 내려고하고있다. 나는 그들이 주석과 상태 기능에 textarea를 사용한다는 것을 알고 있지만 게시물에 누군가를 태그하면 뭔가 밝은 파란색 배경이있는 텍스트 영역의 텍스트 선택 부분이 강조 표시됩니다. 나는 textarea 또는 마지막으로 적어도이 유형의 요소에서는 가능하지 않다는 것을 알았습니다. 그렇다면이 요소를 어떻게 사용하고 있습니까? 그게 뭐야? 누구든지 어떤 생각을 가지고 있니? 일부 연기와 거울에 은행 업무를하는 방법에 관해서는 어떻게 확신 할 수 없습니까?jQuery 또는 JavaScript 텍스트 영역에서 선택된 텍스트를 강조 표시하는 방법

출처

2012-02-10 chris

아마도 contenteditable을 사용하고 있습니다 (http://html5demos.com/contenteditable 참조). 이것은 당신이 텍스트의 일부분의 배경을 바꿀 수있게 할 것입니다. – dstarh

@dstarh 흥미로운 점은 실제로 그렇지 않다는 것입니다. – Domenic

그래, 나는 마츠 치의 대답을 보았습니다. contenteditable을 사용하면 같은 효과를 얻을 수 있다고 생각합니다. – dstarh

어떤 식 으로든 textarea을 사용하고 있지만, 대부분의 마법은 div과 CSS로 이루어집니다. 나는 사파리의 웹 인스펙터에서이 뽑아 :

<div class="inputContainer"> 
    <div class="uiMentionsInput" id="up84fa_5"> 
    <div class="highlighter" style="direction: ltr; text-align: left; "> 
     <div style="width: 499px; "> 
     <span class="highlighterContent"><b>Brandan Lennox</b> is the coolest.</span> 
     </div> 
    </div> 

    <div class="uiTypeahead composerTypeahead mentionsTypeahead" id="up84fa_9" style="height: auto; "> 
     <div class="wrap"> 
     <input type="hidden" autocomplete="off" class="hiddenInput"> 
     <div class="innerWrap"> 
      <textarea class="uiTextareaAutogrow input mentionsTextarea textInput" title="What's on your mind?" name="xhpc_message_text" placeholder="What's on your mind?" onfocus="return wait_for_load(this, event, function() {if (!this._has_control) { new TextAreaControl(this).setAutogrow(true); this._has_control = true; } return wait_for_load(this, event, function() {JSCC.get('j4f3584ff4f90d07867222385').init(JSCC.get('j4f3584ff4f90d07867222386'));;JSCC.get('j4f3584ff4f90d07867222386').init([&quot;buildBestAvailableNames&quot;,&quot;hoistFriends&quot;]);JSCC.get('j4f3584ff4f90d07867222383').init({&quot;max&quot;:10}, null, JSCC.get('j4f3584ff4f90d07867222385'));;;});});" autocomplete="off" style="height: 48px; direction: ltr; ">What's on your mind?</textarea> 
     </div> 
     </div> 
    </div> 
    <input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="@[815490222:Brandan Lennox] is the coolest."> 
    </div> 
    <div class="attachmentMetaArea"></div> 
</div>

중요한 요소 :

div.highlighter

과 그 후손 span.highlighterContent합니다. 강조 표시된 내용으로 b 요소를 스타일합니다.
실제 textarea 요소의 지저분한 onfocus 처리기입니다. 그곳의 어딘가에 textarea 콘텐츠 자체가 업데이트되지 않기 때문에 TextAreaControl 개체가 만들어집니다.이 개체는 DOM의 다른 개체를 만드는 것으로 보입니다.
사용자가 실제로 언급 한 사람을 알 수 있도록 사용자 지정 데이터를 서버에 제출하는 input[type=hidden].mentionsHidden.

이것은 완전히 페이스 북과 관련이 있지만 어쩌면 무엇을하고 싶은지 아이디어를 줄 수 있습니다.

출처

2012-02-10 21:12:07 Brandan

고전적인 텍스트 영역을 사용하지 않았습니다. 나는 그것이 미친 소리 인 것을 안다. 그러나 당신이 타이프하는 것에 따라, 그것은 표시 할 수있는 html를 생성한다. Firebug로 실시간으로 어떻게되는지 볼 수 있습니다.

출처

2012-02-10 21:02:45

방화범이 끌리는 텍스트 영역을 보여줍니다 ...하지만 어쩌면 그것은 HTML로 생성 된 마법 뒤에 숨어있을 수 있습니까? 정말로 미쳤다. – Domenic

그래, 이건 내 질문의 기초, 트위터, linkedin, 페이 스북 (Facebook) 및 이와 유사한 기능을 가진 비슷한 엔티티에서 파이어 버그를보고 난 후에 고전적인 textarea 태그를 참조하십시오. 그러나 당신의 연출을들은 후에 그것은 약간의 의미를 갖습니다. 당신이 초점을 맞출 때 div에 맞춰서이 숨겨진 텍스트 영역에 초점을 맞추고 textarea는 키 이벤트를 사용하여 div의 HTML에 입력하는 것을 반영합니다 .. 어떤 이벤트 @ 기호와 같은 다른 것들을 실행하십시오. – chris

저는 이것을 수행 할 수있는 html5 데모를 기반으로 예제를 작성했습니다. 그것을 확인하십시오 http://jsfiddle.net/KStst/ 이것은 섹션을 편집 가능하게 만들고 브라우저에 기본적인 html 기능을 이해하도록 알려주는 것입니다. 이것은 아마 페이스 북이 그것을하는 방법이 아니지만 주어진 html5는 아마도 "함께 할 가치가있는 미래"입니다.

출처

2012-02-10 21:06:42 dstarh

jQuery 또는 JavaScript 텍스트 영역에서 선택된 텍스트를 강조 표시하는 방법

답변

관련 문제