> 웹 프론트엔드 > CSS 튜토리얼 > contenteditable=\'true\'를 사용하여 div에 자리 표시자 텍스트를 추가합니다.

contenteditable=\'true\'를 사용하여 div에 자리 표시자 텍스트를 추가합니다.

PHPz
풀어 주다: 2024-07-26 02:27:23
원래의
873명이 탐색했습니다.

contenteditable 속성을 접하셨을 수도 있습니다. 많은 곳에서 사용됩니다. 텍스트 영역과 같은 것보다 훨씬 더 나은 대안입니다. 모든 div에 contenteditable="true"를 추가하면 입력 필드처럼 작동합니다. 이 기사에서는 기본적으로 자리 표시자 속성을 지원하지 않으므로 텍스트에 자리 표시자를 추가하는 방법을 보여 드리겠습니다.

필요한 코드

div[contenteditable] {
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}
로그인 후 복사

이것이 필요한 코드의 전부입니다! 그러나 CSS에만 추가하면 작동하지 않습니다. HTML에 자리 표시자 속성을 추가하고 div가 표시되는지 확인해야 합니다.

전체 코드/예제

HTML

<div contenteditable="true" placeholder="Subscribe to Axorax on YT! :D"></div>
로그인 후 복사

CSS

div[contenteditable] {
  /* Basic styles */
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  background: #292929;
  color: #fff;

  /* Placeholder code */
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}
로그인 후 복사

Add placeholder text to div with contenteditable=

그게 전부입니다. 도움이 되셨기를 바랍니다!

위 내용은 contenteditable=\'true\'를 사용하여 div에 자리 표시자 텍스트를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿