콘텐츠 편집 가능한 요소에 일반 텍스트만 입력하도록 만드는 방법 00 Zhang Xinxu
1. 과거를 복습하고 새로운 것을 배웁니다
몇 년 전, 잠깐만요, contenteditable(오른쪽 상단)을 검색해 보겠습니다. 하, 2010년에 제가 썼습니다. 기사 "div는 높은 적응성을 쉽게 달성하기 위해 텍스트 영역 텍스트 필드를 시뮬레이션합니다. 이는 contenteditable의 응용 프로그램입니다.
모든 브라우저에서 지원되는 contenteditable 시뮬레이션 텍스트 필드를 사용하면 콘텐츠 높이에 따라 자동으로 열리는 아주 좋은 경험을 얻을 수 있지만 HTML 콘텐츠를 직접 붙여넣을 수 있다는 큰 문제가 있습니다. 아래와 같이:
이전 기사에서는 콘텐츠가 순수한 텍스트인지 확인하기 위해 HTML을 필터링하는 방법을 언급했습니다. 하지만 이 방법의 문제점은 다음과 같습니다.
붙여넣기 완료부터 필터링 종료까지 시간 지연이 발생하고 사용자는 콘텐츠가 깜박이는 것을 보는 나쁜 경험을 합니다.
커서 위치가 바뀌는데, 예전에는 초점 위치가 아니네요;
그때는 그림이 깨져서 위 수준까지만 됐어요. 실제로는 일반 텍스트만 입력하도록 contenteditable 요소를 제어하는 것이 더 좋은 방법입니다.
2. contenteditable 속성과 관련이 없는 CSS 제어 방법
div 요소를 편집 가능, 즉 읽기 및 쓰기 가능하게 만들기 위해 가장 일반적으로 사용되는 속성은 contenteditable입니다. 기본적으로 모두가 알고 있는 프론트엔드 애플리케이션 방법입니다. 그러나 CSS에 일반 요소를 읽고 쓸 수 있게 만드는 속성이 있다는 것을 아는 학생은 훨씬 적습니다.
주인공 등장: user-modify.
지원되는 속성 값은 다음과 같습니다:
user-modify: 읽기 전용;
사용자 수정: 읽기-쓰기;
사용자 수정: 쓰기 전용;
사용자 수정: 읽기-쓰기-일반 텍스트 전용;
where, write -only 걱정하지 마세요. 이 시대에는 기본적으로 브라우저 지원이 없으며 아마도 앞으로도 없을 것입니다. 읽기 전용은 일반 요소의 기본 상태인 읽기 전용을 의미합니다. 그런 다음 읽기-쓰기 및 읽기-쓰기-일반 텍스트 전용을 사용하면 요소가 텍스트 필드처럼 동작하여 포커스와 콘텐츠 입력이 가능해집니다.
여기를 클릭할 수 있습니다: CSS 사용자 수정 속성 동작 데모
읽기-쓰기 및 읽기-쓰기-일반 텍스트 전용의 두 가지 값이 설정되어 있음을 확인할 수 있습니다
태그 요소에 초점을 맞출 수 있습니다.
둘의 차이점은 서식 있는 텍스트를 입력할 수 있는 반면 다음은 일반 텍스트만 입력할 수 있다는 것입니다. 예를 들어 특정 웹페이지에서 복사합니다. 동시에 내용을 붙여넣고 살펴보세요.
자, 이제 이 기사 제목에 대한 답은 실제로 이미 나와 있습니다. 즉, 요소를 설정하십시오:
user-modify: read-write-plaintext-only
요소를 편집 가능하게 만들고 일반 텍스트만 입력할 수 있도록 설정할 수 있습니다. 텍스트 영역처럼 동작합니다. 텍스트 영역과 동일합니다.
멋지지 않나요! 그러나 현재 웹킷 커널 브라우저만이 읽기-쓰기-일반 텍스트 전용 값을 지원한다는 점을 알려드리게 되어 유감입니다. 따라서 우리가 실제로 사용하는 것은 다음과 같습니다:
-webkit-user-modify: read - write-plaintext-only
웹킷 콘텐츠만 고려하면 되는 데스크톱 웹 프로젝트는 물론 모바일 터미널에서도 사용할 수 있습니다.
3. 표준 contenteditable 속성 값을 사용한 HTML 제어 방법
에헴, 질문: HTML에서 contenteditable이 지원하는 속성 값은 무엇인가요?
TutuSimple이 출시되었을 때 내 마음 속에는 contenteditable="true"와 contenteditable="false"만 있었습니다. Keke. 나중에 새 초안에서는 Multiple이 있다고 분명히 밝혔습니다. 기타 속성 값:
contenteditable 속성은 열거된 속성입니다.
키워드는 빈 문자열(""), "events", "caret", "typing",
“일반 텍스트 전용”, “true” 및 “false”라는 추가 상태가 하나 있습니다.
상속 상태는 누락된 값 기본값입니다(그리고 유효하지 않은 < /p). >
값 기본값).
세로 표시는 다음과 같습니다(기본 상속 상속 제외):
contenteditable=""
contenteditable= "events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable= "false"
묻지 마세요. "이벤트"와 "캐럿"이 무엇인지는 모르지만 "일반 텍스트 전용"에 대해서는 알고 있습니다. 일반 텍스트를 입력합니다. 여기서는 데모가 필요하지 않으며 아래 상자만 사용하여 서식 있는 텍스트를 만들 수 있는지 확인할 수 있습니다.
예기치 않게 서식 있는 텍스트를 얻을 수 있다면 이는 Chrome 및 기타 도구를 사용하고 있지 않다는 의미입니다. 브라우저.
즉, contenteditable="plaintext-only"는 CSS-webkit-user-modify: read-write-plaintext-only와 동일합니다. 현재는 Chrome 브라우저에서만 더 잘 지원됩니다.
그래서 프로젝트에 아직 IE8 브라우저 사용자가 많다면, 멋진 것들을 바로 사용할 수 없다는 점에 안타까울 수밖에 없습니다. 최후의 수단으로 다음 방법을 찾아보세요.
4. 붙여넣기 이벤트를 제어하는 JS 제어 방법
단순히 키보드를 탭하면 입력 내용은 실제로 일반 텍스트입니다. 예를 들어, 일부 특별한 상황을 제외하고 IE 브라우저 아래의 편집 상자는 자격을 갖춘 URL 주소에 대한 링크를 자동으로 추가합니다. 풍부한
텍스트 오염은 주로 복사하여 붙여넣을 때 발생합니다. 따라서 붙여 넣을 때 클립보드의 내용에 대해 HTML 필터링을 수행한 다음 수동으로 내용을 삽입할 수 있다면 가능하지 않을까요? 서식 있는 텍스트를 입력할 수 없는 문제를 완벽하게 해결했습니다