1
텍스트 입력 (input type='text' 또는 textarea) 위에 맞춤 자리 표시 자 텍스트 요소를 배치하고 싶습니다. 그러나 자리 표시 자 텍스트 요소가 바로 위에있을 때 텍스트 입력을 클릭 가능하게 만드는 방법을 알아낼 수 없습니다. 자리 표시 자를 클릭 취소 할 수 없도록 설정하려면 pointer-events:none을 설정해야하지만 이전 버전의 IE에서는 지원되지 않습니다.포인터 이벤트가 발생하지 않는 클릭 방지 : 없음
대체로 pointer-events:none에 대한 대안으로는 자식 요소의 onclick을 수동으로 트리거해야합니다. 그러나 텍스트 입력의 경우 onclick은 브라우저에서 암시 적으로 수행되므로 트리거 할 이벤트가 없습니다.
다른 해결책 텍스트 입력에 초점을 맞추기 위해 자리 표시 자에 onclick을 설정하는 것도 고려했지만 커서가 항상 입력의 끝에 배치됩니다. 텍스트 입력을 클릭하고 커서를 클릭 한 위치에 표시 할 수있게하려고합니다.
다른 옵션은 z-index을 사용하여 입력 아래에 자리 표시자를 배치 한 다음 입력을 투명하게 만드는 것입니다. 그러나 이것은 또한 입력의 기본 테두리를 제거하므로 바람직하지 않습니다.
HTML/CSS와 순수한 자바 스크립트 (jquery가 아님) 만 사용하여 텍스트가 위에 표시되는 경우에도 텍스트 입력을 클릭 할 수 있습니까?
오버레이를 숨기는 것이 쉽습니다. 전체 텍스트를 쉽게 선택할 수 있습니다. 텍스트 상자 내부의 좌표를 파악하고 텍스트를 그 안에있는 텍스트에 매핑하고 거기에 커서를 놓으면 .... 흠 .. 힘든 문제입니다. –
나는 당신이 성취하려는 것을 이해하는 데 어려움을 겪고 있습니다. '바로 위에'라고 말하면, 그 바로 앞에있는 것을 의미합니까, 아니면 텍스트 위에 입력 내용이 보이지 않도록 텍스트 위에 입력 텍스트를 렌더링하고 있습니까? – Gerald
나는 ''요소가 당신이 원하는 것이라고 생각한다. – sircapsalot