자리 표시 자 내에서 HTML 추가

Question

나는 HTML 입력 자리를 사용하는 팬이며 사용자가 입력해야하는 내용을 사용자에게 설명하는 데 도움이됩니다. 그러나 때로는 사용자에게 단순한 문장 이상의 정보를 제공해야합니다. 기본적으로 내 텍스트 영역 자리 표시 자에 줄 바꿈, 탭 등을 추가 할 수 있기를 바랍니다. 나는 이것을하기 위해 특별한 코딩을 사용한다고 들었다. (그리고 이것들을 사용하여 코드 조각을 썼다.) 나는 믿을 만하지 않다. 예를 들어 특정 브라우저는 코드에 대해 서로 다른 양의 공백을 표시합니다. 이 코드의 예는 다음과 같을 것이다 :

<textarea name="parts" id="parts" placeholder="Some-Part&#x0a;&#x09;&#x09;&#x09;&#x0a;&#x09;&#x09;&#x09;&#x09;&#x0a;&#x09;&#x09;&#x09;&#x09;&#x0a;..."></textarea> 

따라서, 솔루션에서 내 생각이 자리에 실제 HTML 요소를 넣을 수있는 능력을 가지고하는 것입니다. 나는 이것을 어떻게 성취 할 수 있었는지에 관해 연구했지만, 그것에 관해서 아무것도 찾을 수 없었다. 이 기능과 비슷하거나 비슷한 기능을 찾을 수있는 곳이 있습니까? 아니면 같은 것을 성취하기 위해 내가 할 수있는 일의 대안이 있습니까?

Answer 1

placeholder 속성의 값은 일반 텍스트입니다. 태그가 인식되지 않습니다. 문자 참조는 인식되지만 TAB U + 0009 (	)과 같은 문자의 효과는 구현에 따라 결정됩니다.

아니요, HTML 마크 업을 사용할 수 없습니다. 궁극적 인 문제에는 해결책이있을 수 있지만 그 문제는 설명하지 않았습니다. 일반적으로 짧은 일반 텍스트 문자열이 아닌 placeholder 값이 필요한 경우 정의에 대해 특성을 사용하려고합니다. 힌트은 대체하지 않고 필드 레이블과 설명을으로 보완합니다. 일반적으로 필요한 모든 설명이 필드 앞에 와야하며 원하는대로 HTML 마크 업을 사용할 수 있습니다.

Answer 2

줄 바꿈을 삽입하기 위해 js를 사용하는이 대답을 찾을 수있었습니다. Insert line break inside placeholder attribute of a textarea?

Answer 3

텍스트 영역 태그 안에 HTML을 사용할 수 없습니다. 나는 다른 UI/구현을 권하고 싶습니다,하지만 당신이 뭔가를 할 수 있습니다 :

<div contenteditable="true" class="myarea"> 
    <em>Placeholder</em> 
</div> 

그리고는 CSS 클래스와 텍스트 영역을 모방. 그러면 초점의 내용을 지울 수 있습니다.

var firstFocus = true; 
$('#myarea').focus(function() { 
    if (firstFocus) { 
     $('#myarea').html(''); 
     firstFocus = false; 
    } 
}); 

자세히 알 수 있듯이, 그것은 꽤 추해지기 시작합니다. 이것은 자리 표시 자 속성과 정확히 같은 방식으로 작동하지 않으므로 텍스트 커서를 관리하고 이벤트를 변경해야합니다. 일반적으로 입력을 시작하자 마자 정보가 사라지기 때문에 자리 표시 자 텍스트는 UI가 좋지 않습니다. : p