텍스트가 텍스트를 가로막는 텍스트

Question

텍스트 영역을 기본 포맷으로 처리하기 위해 동일한 모노 스페이스 글꼴 및 위치로 div를 배치했습니다. div는 동일한 텍스트를 표시하지만 색상 및 굵게 표시됩니다.

그러나 div 내부의 텍스트가 방해되어 사용자가 텍스트 영역에서 텍스트를 선택할 수 없게 만듭니다.

<div class="centerc"> 
    <div class="copyc"> 
     <textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea> 
     <div id="copyadd" class="copyadd"></div> 
     <!--THIS IS THE DIV FOR FORMATTING^--> 
    </div> 
</div> 

-webkit-user-select : none; -ms-user-select : none; 사용자 선택 : 없음; etc는이 문제를 해결하지 못했지만 사용자가 div에서 텍스트를 선택할 수 없게 만들었습니다. 더 이상의 CSS 코드가 필요한 경우 댓글을 달았지만 필요하지는 않습니다.

div가 사용자가 텍스트 영역에서 텍스트를 선택할 수 없게하는 것을 어떻게 막을 수 있습니까 (가능한 경우)? 그렇지 않은 경우 사용하는 방법에 대한 대안이 있습니까?

편집 : 처음부터 여러 형식의 서식을 원했음을 분명히해야했습니다. 왜 그렇게하지

.copyc:hover txtarea { 
z-index: 2; 
} 

Answer 1

텍스트 영역에 서식을 지정할 수는 없지만 편집 가능한 div를 사용하여 텍스트 영역을 제거 할 수 있습니다. 최소한 문제를 간단하게 만들 것입니다.

이 질문을 참조하십시오 : 완전히 editable div

Answer 2

당신은, 예를 들어,이 같은 CSS의 사용자가 부모 DIV 유혹 할 때 사업부의 앞에 텍스트 영역을두고 규칙, 무언가를 추가 할 수 있습니다 div가 수행하려는 작업을 수행하기 위해 textarea에 약간의 CSS를 추가하십시오. 좋은 출발점이 반대에서 생각하는 <textarea>의 양식에 일치되는 용량을 확장하기 위해

.dark-text { 
    font-weight: bold; 
    font-color: black; 
} 

Answer 3

:

Answer 4

: "마법 지팡이"아니에요 편집 <div> ...

<div id='divTextEditable' contenteditable></div> 

하기를, 그리고 그것의 단점을 가지고 있지만, 좋은 출발점입니다.