브라우저가 contenteditable 요소에 HTML을 삽입하지 못하도록하는 방법

사용자가 contenteditable 요소에 줄 바꿈을 삽입하면 브라우저에서 HTML을 요소에 삽입합니다. 여기 브라우저가 contenteditable 요소에 HTML을 삽입하지 못하도록하는 방법

는 다양한 브라우저에서 [Enter] 쳤을 때 당신은 무엇을 얻을 수 있습니다 : (. this JSFiddle demo와 자신을위한 시험)

IE:  <p></p> 
Chrome: <div><br></div> 
Safari: <div><br></div> 
Firefox: <br /> 
Opera: <br />

을

이 때 HTML을 삽입하지 브라우저를 얻을 수있는 방법이 있나요 사용자가 HTML을 삽입하지 않았습니까? 물론, 난 그냥

<textarea></textarea>

를 사용할 수 있습니다 ... 그리고 그게 내가 할 방법에 매우 유사한 행동 않는다, 그러나, 나는 같은는 엄격하게 "텍스트 전용"입력을 원하지 않는 I Javascript를 사용하여 편집 가능한 요소에서 HTML을 추가 및 수정합니다.

필자는 사용자 유형에 따라 모든 HTML을 계속 스트립하는 것으로 생각했지만, 내가 만든 특수 클래스가있는 HTML 만 허용하도록했습니다. 그러나 그것은 훌륭한 해결책처럼 보이지 않습니다. wrap='soft' 또는 다른 말로 표현할 수있는 코드가 있습니까? "HTML 작성을 중단하고 요소를 추가하지 마세요."

출처

2014-01-17 brentonstrine

콘텐츠를 편집 가능하게 만들면 사용자가 HTML 콘텐츠를 암시 적으로 변경할 수 있습니다.

반환을 누르면 단락 ()을 닫고 새 것을 시작 ()하거나 줄 바꿈 ( )을 입력하는 것과 같은 종류의 개행을 삽입해야합니다. 표준 줄 바꿈 문자 (예 : \n 또는 \n\r)가 사용자가 기대하지 않는 단일 공간으로 렌더링된다는 단순한 사실 때문에 HTML의 두 가지 모두 HTML 태그를 필요로합니다. 따라서 원시 줄 바꿈을 "부드러운 랩 (wrap) "은 이해가 안되며 궁극적으로 사용자가 무언가를 깨뜨리지 않아서 자신의 엔터 키를 부숴 버리는 결과를 낳을 수 있다고 생각할 때 휴식을주지 않기 위해 귀하의 사이트에서 화를냅니다.

더 재미있는 사실은 사용자가 일부 텍스트를 강조 표시하면 키보드 바로 가기를 사용하여 텍스트를 굵은 글씨와 기울임 꼴로 표시 할 수 있고 HTML을 다시 삽입 할 수 있다는 것입니다.

이 동작을 재정의하기 위해 Javascript를 작성하지 않으면 요청한 뉴 라인을 렌더링하기 위해 HTML 태그를 삽입하는 Enter 키를 비활성화 할 수 있는지 확신 할 수 없습니다. 당신이 텍스트를 두 번 클릭하여 편집하게되면 (적어도 Internet Explorer에서)

<html> 
<body> 
<div contentEditable="true"> Some things.</div> 
</body> 
</html>

이를 보여주기 위해 여기에 정말 간단 페이지입니다. 줄의 끝으로 이동하고 다음을 입력하십시오.

이를 입력합니다 -이 p 태그 이전 텍스트) 포장 ((새로운 paragaph가 만들어를
유형 "Words", 그것은 선택과 충돌 은 CRTL + B - 텍스트는 이제  태그에 싸여

Shift 키를 히트 +

 

"More words"유형을 선택하고 Crtl + i을 누르십시오. 이제  태그로 기울임 꼴로 표시됩니다.

그리고 소스처럼 보일 것입니다 : 당신이 지역으로가는 내용을 완벽하게 제어하려면

<html> 
<body> 
<div contentEditable="true"> 
    <p>Some things.</p> 
    <p> 
    <strong>Words</strong> 
    <br> 
    <em>More words</em> 
    </p> 
</div> 
</body> 
</html>

, 나는 WYSIWYG 편집기, 또는 대안을 사용하는 것이 좋습니다 것, 받아 그 아마도 브라우저 그것의 일을 알고 그것을 그것의 일을하도록하십시오. 그래서 당신은 그것에 대해 걱정할 필요가 없습니다.

출처

2014-01-17 01:13:46

Heh heh, 나는 WYSIWYG 편집기를 만들었습니다. 의도적 인 경우 대부분 사용자의 HTML 삽입에 신경 쓰지 않습니다 (예제에서와 같이). HTML을 괴롭히는'[Enter]'이유는'[Enter]'를 치지 않는 것을 기억하기가 대단히 어렵고 브라우저들간에 일관성이 없기 때문입니다. – brentonstrine

브라우저가 의도 한 것과 다른 방식으로 입력 키 누르기를 해석하도록 편집 가능한 div를 비활성화하거나 강요하는 크로스 브라우저 방식이 없습니다.

게다가, 다른 브라우저는 새로운 라인으로 다른 일을 할 것입니다. 일부는  태그 안에 줄 바꿈을 적용하고 일부는  을 추가합니다.

아이디어는 편집 가능한 div를 제어하는 브라우저라는 점입니다.
실시간으로 출력물을 들여다 보면 드라이버가 운전수로부터 휠을 빼앗 으려하는 승객과 같을 것입니다.

그런 div에서 키 이벤트를 가져 오지 못할 수도 있습니다. 예를 들어, 귀하의 바이올린은 IE11에서 작동하지 않는 것 같습니다.

나는 이렇게 편집자가하는 것처럼 사용자 입력을위한 텍스트 영역을 사용하고 다른 편집 가능한 div에서 원하는 리치 HTML을 생성합니다.

출처

2014-01-17 01:38:59

사실이 아닙니다. 키 누르기를 가로 챌 수 있고 모든 주류 브라우저에서 자신의 콘텐츠를 삽입 할 수 있습니다. –

예, [운전수의 손을 잡아 당기는 동안 간신히 트랙을 유지할 수 있습니다] (http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-May/031577. HTML) :). –

그래, 나는 기본 브라우저 동작이 가변적이며 자신의 것으로 바꾸는 것이 옳다는 것에 동의하지 않는다. 그러나 항상 핵심 이벤트를 가져 와서 자신의 일을 대신 수행 할 수 있습니다. –

브라우저가 contenteditable 요소에 HTML을 삽입하지 못하도록하는 방법

답변

관련 문제