기본적으로 텍스트 영역 내에 아이콘을 포함하는 방법

Question

텍스트 영역 내에 이미지를 삽입하려고했지만 contenteditable ="true" 속성이 텍스트 영역 인 것 이외에는 불가능한 것 같습니다. 그 사이에, 나는 diaspora 위치를 검사하고 나는 그것이 가능할다는 것을 것을을 발견했다. 나는 그것이 어떻게 행해졌는지 확신하지 못한다. 그게 정말로 텍스트 영역입니까 또는 some css div를 사용하여 트릭을할까요? 어떻게 구현할 수 있습니까?

Answer 1

당신은 이미지를 선택하고 여러 부분으로 양식을 제출할 수 있도록 텍스트 영역에 포함 사업부를 사용해야합니다 : 이미지 아래

은 해당 기능의 표현이다. 그것의 전적으로 CSS 게임. 절대 div를 사용하여 단추 나 이미지의 위치를 ​​지정할 수 있습니다. 필요한 작업은 w.r.t. 텍스트 영역. 이 같은 것들을 당신이 .click() 및 .blur() 이벤트를 사용하여, 더 복잡한 화면을 표시하는 요소와 텍스트 영역을 교환하는 것이 더 낫다 들어 link

Answer 2

에서이, 유사한 게시물을 확인 . Here is an example으로 재생할 수 있습니다.

HTML :

<div class="container"> 
    <textarea class="text-area hidden"></textarea> 
    <div class="text-area icon-example"></div> 
</div> 

CSS :

.container { 
    position: relative; 
    display:inline-block; 
} 
.text-area { 
    width: 200px; 
    height: 50px; 
    border:1px solid #ccc; 
    display:inline-block; 
} 

.icon-example:after { 
    content: url(http://www.stat.ncsu.edu/dept-icons/camera-icon.gif); 
    position:absolute; 
    z-index:9999; 
    right: 3px; 
    bottom: 6px; 
} 

.hidden { 
    display:none; 
} 

JQuery와 : 당신은 너무 사업부의 CSS와 텍스트 영역과 장난 훨씬 더 내 예를 취할 수

$('.text-area').click(function() { 
    $(this).hide(); 
    $(this).parent().find('textarea').show(); 
}); 
$('textarea').blur(function() { 
    $(this).parent().find('div').text($(this).val()).show(); 
    $(this).hide(); 
}); 

그들의 모습은 결국 서로 일치합니다. 이전에이 작업을 수행했으며 브라우저 간 호환이 가능하도록 만들 수 있습니다.