사용자가 입력 할 때 텍스트 섹션을 강조 표시하려면 어떻게해야합니까?

Question

사용자가 입력 할 수있는 페이지 입력란이 있습니다. 사용자가 입력 할 때 텍스트의 섹션을 강조하고 싶습니다. 일을 단순하게하기 위해 나는 지금 모든 모음을 강조하려고 노력하고 있습니다.

코드의 첫 번째 부분은 this question에서입니다 :

$('[contenteditable]').live('focus', function() { 
    var $this = $(this); 
    $this.data('before', $this.html()); 
    return $this; 
}).live('blur keyup paste', function() { 
    var $this = $(this); 
    if ($this.data('before') !== $this.html()) { 
     $this.data('before', $this.html()); 
     $this.trigger('change'); 
    } 
    return $this; 
}); 

어떤에서 그때 this을 작성할 수 있습니다

var magicRegex = /[aeiou]/gi; 

$('#message').change(function() { 
    $(this).find('br').replaceWith('\n'); 
    var message = $(this).text(); 

    message = message.replace(magicRegex , '<mark>$&</mark>'); 

    message = message.replace(/\n/gi, '<br />'); 
    $(this).html(message); 
}).change(); 

이 코드는 사용자 유형으로 모음을 강조한다. 그러나 강조 표시가 업데이트 될 때마다 필드 초점이 손실되고 사용자가 다른 문자를 다시 입력해야합니다.

어떻게 해결할 수 있습니까?

Answer 1

저는 모방 필드를 생성하지 않으면이 작업을 수행 할 수 없다고 확신합니다.

HTML을 사용하여 입력 필드와 비슷한 HTML 요소를 생성 할 수 있습니다. 그런 다음 요소에 포커스가 있으면 키 스트로크를 캡처 할 수 있습니다. 백 스페이스, 탭 등과 같은 특수 문자가 아닌 키를 추적하고 개별적으로 처리해야합니다. 사용자 유형에 관계없이 실제 양식 필드 (또는 선택한 경우 JavaScript 변수)에 저장할 수 있습니다.

모방 필드는 실제 값 (양식 필드 또는 JS 변수에 저장 됨)을 읽고이를 CSS, DOM 요소 등으로 렌더링하여 특정 문자가 강조 표시된 것처럼 보이게합니다 (또는 ' 그들과 함께하고 싶다).

나는 당신이하려는 것을 달성 할 수있는 다른 방법을 모른다.

행운을 빈다.