추가 방지 ▁prevent추가ed▁content▁addingENTER - Chrome에서
나는 있습니다contenteditable 그리고 제가 어떤 하고 요소를 때마다 내무가타고칠하때마다이핑를언그리가고▁element,다때마칠▁i,▁and▁whenever▁and.ENTER그것은 새로운 것을 만듭니다.<div>새 줄 텍스트를 배치합니다.저는 이것이 조금도 마음에 들지 않습니다.
이런 일이 발생하는 것을 방지하거나 최소한으로 대체하는 것이 가능합니까?<br>?
데모 http://jsfiddle.net/jDvau/ 입니다.
참고: 이것은 파이어폭스에서 문제가 되지 않습니다.
사용해 보십시오.
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13) {
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
document.execCommand('insertHTML', false, '<br/>');
// prevent the default behaviour of return key pressed
return false;
}
});
추가하기display:inline-block;contenteditable 생되않 니다습.div,p그리고.spanChrome에서 자동으로.
CSS 변경만으로 이 작업을 수행할 수 있습니다.
div{
background: skyblue;
padding:10px;
display: inline-block;
}
pre{
white-space: pre-wrap;
background: #EEE;
}
http://jsfiddle.net/ayiem999/HW43Q/
모든 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 작동합니다.
document.addEventListener('keydown', event => {
if (event.key === 'Enter') {
document.execCommand('insertLineBreak')
event.preventDefault()
}
})<div class="element" contenteditable="true">Sample text</div>
<p class="element" contenteditable="true">Sample text</p>한 가지 불편한 점이 있습니다.에는 요소에 될 수 .<br>도 있습니다.하지만 필요하다면 코드를 추가해서 그것을 줄일 수도 있습니다.
후행을 제거하려면 이 답변을 선택하십시오.<br> https://.com/a/61237737/670839https ://stackoverflow.com/a/61237737/670839
사용해 보십시오.
$('div[contenteditable="true"]').keypress(function(event) {
if (event.which != 13)
return true;
var docFragment = document.createDocumentFragment();
//add a new line
var newEle = document.createTextNode('\n');
docFragment.appendChild(newEle);
//add the br, or p, or something else
newEle = document.createElement('br');
docFragment.appendChild(newEle);
//make the br replace selection
var range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(docFragment);
//create a new range
range = document.createRange();
range.setStartAfter(newEle);
range.collapse(true);
//make the cursor there
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
return false;
});
http://jsfiddle.net/rooseve/jDvau/3/
document.execCommand('defaultParagraphSeparator', false, 'p');
대신 문단을 사용하도록 기본 동작을 재정의합니다.
크롬에서 Enter의 기본 동작은 다음과 같습니다.
<div>
<br>
</div>
그 명령으로 그것은 될 것이 될 것입니다.
<p>
<br>
</p>
보다 선형적으로 설계되었기 때문에 이제는<br>당신이 필요합니까?
W3C Editor's Draft에는 ContentEditable에 상태를 추가하는 것과 Enter 키를 누를 때 새 요소를 추가하는 브라우저를 방지하는 것에 대한 몇 가지 정보가 있습니다.plaintext-only.
<div contentEditable="plaintext-only"></div>
하나만 넣는 대신 +를 사용합니다.enter<br>텍스트를 태그 또는 랩으로 감습니다.<p>꼬리표
은 는하방법.contenteditable를 누르면 브라우저에 따라 동작합니다.<div>웹킷(크롬, 사파리) 및 IE에서 발생합니다.
저는 몇 달 전에 이 문제로 어려움을 겪었고 다음과 같이 수정했습니다.
//I recommand you trigger this in case of focus on your contenteditable
if( navigator.userAgent.indexOf("msie") > 0 || navigator.userAgent.indexOf("webkit") > 0 ) {
//Add <br> to the end of the field for chrome and safari to allow further insertion
if(navigator.userAgent.indexOf("webkit") > 0)
{
if ( !this.lastChild || this.lastChild.nodeName.toLowerCase() != "br" ) {
$(this).html( $(this).html()+'<br />' );
}
}
$(this).keypress( function(e) {
if( ( e.keyCode || e.witch ) == 13 ) {
e.preventDefault();
if( navigator.userAgent.indexOf("msie") > 0 ) {
insertHtml('<br />');
}
else {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement('br');
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}
});
}
도움이 되길 바라며, 필요한 만큼 명확하지 않다면 제 영어 실력에 대해 사과드립니다.
EDIT : 제거된 jQuery 함수 수정jQuery.browser
당신은 별도로 가질 수 있습니다.<p>사용하는 대신 각 라인에 대한 태그<br>태그를 지정하여 즉시 사용할 수 있는 브라우저 호환성을 향상할 수 있습니다.
이 작업을 수행하려면,<p>내용 편집 가능한 div 내부에 기본 텍스트가 포함된 태그입니다.
예를 들어, 다음 대신:
<div contenteditable></div>
사용:
<div contenteditable>
<p>Replace this text with something awesome!</p>
</div>
Chrome, Firefox 및 Edge에서 테스트되었으며 두 번째는 각각 동일하게 작동합니다.
그러나 첫 번째는 Chrome에서 div를 만들고 Firefox에서 줄 바꿈을 만들고 Edge에서 div를 만들고 커서는 다음 div로 이동하는 대신 현재 div의 시작 부분에 다시 놓입니다.
Chrome, Firefox 및 Edge에서 테스트되었습니다.
저는 단축키를 다룰 때 마우스 트랩을 사용하는 것을 좋아합니다: https://craig.is/killing/mice
그런 다음 Enter 이벤트를 가로채고 insertLineBreak 명령을 실행합니다.
Mousetrap.bindGlobal('enter', (e)=>{
window.document.execCommand('insertLineBreak', false, null);
e.preventDefault();
});
모든 명령: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
Chrome 75 및 다음 편집 가능한 요소를 사용하여 작동합니다.
<pre contenteditable="true"></pre>
insert HTML을 사용할 수도 있습니다.
window.document.execCommand('insertHTML', false, "\n");
문제를 해결하려면 스타일(Css)을 사용합니다.
div[contenteditable=true] > div {
padding: 0;
}
블록 파이어폭스를 합니다.
반면에 Chrome은 각 섹션을 태그로 감싼다.당신의 css는 div들에게 배경색과 함께 10px의 패딩을 줍니다.
div{
background: skyblue;
padding:10px;
}
또는 jQuery에서 원하는 동일한 효과를 복제할 수 있습니다.
var style = $('<style>p[contenteditable=true] > div { padding: 0;}</style>');
$('html > head').append(style);
여기 당신의 바이올린 http://jsfiddle.net/R4Jdz/7/ 의 포크가 있습니다.
그inserHTML명령 솔루션은 중첩된 경우 몇 가지 이상한 작업을 수행합니다.contenteditable요소들.
저는 여기서 여러 답변에서 아이디어를 얻었고, 이것이 현재 제 요구에 맞는 것 같습니다.
element.addEventListener('keydown', function onKeyDown(e) {
// Only listen for plain returns, without any modifier keys
if (e.which != 13 || e.shiftKey || e.ctrlKey || e.altKey) {
return;
}
let doc_fragment = document.createDocumentFragment();
// Create a new break element
let new_ele = document.createElement('br');
doc_fragment.appendChild(new_ele);
// Get the current selection, and make sure the content is removed (if any)
let range = window.getSelection().getRangeAt(0);
range.deleteContents();
// See if the selection container has any next siblings
// If not: add another break, otherwise the cursor won't move
if (!hasNextSibling(range.endContainer)) {
let extra_break = document.createElement('br');
doc_fragment.appendChild(extra_break);
}
range.insertNode(doc_fragment);
//create a new range
range = document.createRange();
range.setStartAfter(new_ele);
range.collapse(true);
//make the caret there
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
e.stopPropagation();
e.preventDefault();
return false;
});
// See if the given node has a next sibling.
// Either any element or a non-empty node
function hasNextSibling(node) {
if (node.nextElementSibling) {
return true;
}
while (node.nextSibling) {
node = node.nextSibling;
if (node.length > 0) {
return true;
}
}
return false;
}
은 여러분의 문단을 마수있다니습할리무문으로 감쌀 수 .<p>예를 들어 div 대신 새 줄에 태그가 나타납니다. 예:
<div contenteditable="true"><p>Line</p></div>
문자열을 한 후: " 문열을삽후한입자":
<div contenteditable="true"><p>Line</p><p>New Line</p></div>
div에 예방 기본값 추가
document.body.div.onkeydown = function(e) {
if ( e.keycode == 13 ){
e.preventDefault();
//add a <br>
div = document.getElementById("myDiv");
div.innerHTML += "<br>";
}
}
ckeditor를 사용해 보세요.SOF에서도 이와 같은 형식을 제공합니다.
https://github.com/galetahub/ckeditor
한 모든 키를 한 후 Enter 키를 누르지 않도록 .<div>.<br>꼬리표를 달다
한 가지 문제가 있는데, 우리가 그것을 만들 때 우리의 커서는 같은 위치에 있기 때문에 우리는 선택 API를 사용하여 마지막에 커서를 놓습니다.
다음을 추가하는 것을 잊지 마십시오.<br>첫 번째 입력을 하지 않으면 새 행을 수행하지 않기 때문에 텍스트 끝에 태그를 지정합니다.
$('div[contenteditable]').on('keydown', function(e) {
var key = e.keyCode,
el = $(this)[0];
// If Enter
if (key === 13) {
e.preventDefault(); // Prevent the <div /> creation.
$(this).append('<br>'); // Add the <br at the end
// Place selection at the end
// http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
});
이것은 브라우저 지향 HTML5 편집기입니다.텍스트를 다음으로 묶을 수 있습니다.<p>...</p>그러면 ENTER를 누를 때마다 표시됩니다.<p></p>는 SHIFT마다 또편집기 SHIFT+ENTER를을 삽입하는 <br />.
<div contenteditable="true"><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
<br /><br />
Type some stuff, hit ENTER a few times, then press the button.
</p>
</div>
if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
var range = document.getSelection();
range.pasteHTML(range.htmlText + '<br><br>');
}
else if(navigator.userAgent.toLocaleLowerCase().indexOf('trident') > -1) {
var range = document.getSelection().getRangeAt(0); //get caret
var nnode = document.createElement('br');
var bnode = document.createTextNode('\u00A0'); //
range.insertNode(nnode);
this.appendChild(bnode);
range.insertNode(nnode);
}
else
document.execCommand('insertHTML', false, '<br><br>')
에▁where디this는 다을의미실컨제텍입다니트스는하음▁which다▁context▁actual▁the니▁means▁is입을 의미하는 실제 문맥입니다.document.getElementById('test');.
는 수백 의 수백개사용다니를 사용합니다.<td>계산된 값을 입력하기 위한 요소들 그리고 파이어폭스가 추가하는 것을 발견했습니다.<div></div><br />멋지지 않은 입구에.그래서 이걸 사용했습니다.onkeyup:
$(document).on("keyup", '.first_td_col', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
$(this).empty();
return false;
}
// Do calculations if not enter
});
물론 이것은 모든 것을 클리어합니다.<td>심지어 사용자의 입력까지.하지만 메시지가 표시된 상태에서No enter please.그것은 단지 계산을 하는 데 방해가 되는 불필요한 요소들을 해결합니다.
우리는 그렇게 HTML을 청소할 수 있습니다.
function cleanHtml(innerHTML: string) {
return innerHTML.replaceAll('<div><br></div>', '<br>')
}
in content편집 가능한 작업
const { innerHTML, innerText } = contentEl
console.log({ innerHTML, innerText, cleanHtml: cleanHtml(innerHTML) })
또 다른 방법
$('button').click(function(){
$('pre').text($('div')[0].outerHTML)
});
$("#content-edit").keydown(function(e) {
if(e.which == 13) {
$(this).find("div").prepend('<br />').contents().unwrap();
}
});
각 입력 키의 컨텐츠 편집 가능한 Div에서 새로운 Div 생성 방지: 내가 찾은 솔루션은 매우 간단합니다.
var newdiv = document.createElement("div");
newdiv.innerHTML = "Your content of div goes here";
myEditablediv.appendChild(newdiv);
이 ---내부HTML 콘텐츠는 각 입력 키의 콘텐츠 편집 가능한 Div에서 새 Div를 만들지 못하도록 합니다.
인터넷에는 다양한 솔루션이 있으며 대부분 키 누르기를 동일한 방식으로 처리합니다.execCommand,charCode,keyCode,which 기능은 더 이상 되지 않으며 은 안깝게이기더능은이않사비사다기용니합능을표준타으며지되를 사용합니다.key기능을 제공합니다.
또사용지않음을 사용하지 .contentEditable="plaintext-only"처리하려고 애쓰다enter합니다.br현재 선택 항목에 대한 참고 사항.
Chrome, Firefox, Opera 및 Edge에서 문제 없이 작동하는 아래의 솔루션을 확인하십시오.
function handleEnterPress(e) {
if (e.key.toLowerCase() === 'enter') {
e.preventDefault();
let selection = window.getSelection();
let range = selection.getRangeAt(0);
range.insertNode(document.createElement('br'));
selection.collapseToEnd();
}
return false;
}
function handleEnterPress(e) {
if (e.key.toLowerCase() === 'enter') {
e.preventDefault();
let selection = window.getSelection();
let range = selection.getRangeAt(0);
range.insertNode(document.createElement('br'));
selection.collapseToEnd();
}
return false;
}div[contenteditable="true"] {
background-color: bisque;
padding: 80px;
border: 1px solid black;
}<div contenteditable="true" onkeypress="handleEnterPress(event)">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>이 동작을 완전히 방지할 수 있습니다.
$('<div class="temp-contenteditable-el" contenteditable="true"></div>').appendTo('body').focus().remove();
언급URL : https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
'programing' 카테고리의 다른 글
| ExpressJS - 로더 처리되지 않은 오류 이벤트 (0) | 2023.08.24 |
|---|---|
| 폴더를 라벨로 만들기 전에 폴더가 있는지 확인하는 방법은 무엇입니까? (0) | 2023.08.24 |
| 스프링 부트 + 스프링 보안 + 계층적 역할 (0) | 2023.08.24 |
| PowerShell의 UTF-8 출력 (0) | 2023.08.24 |
| SpinxSE를 사용하는 MariaDB 10.0 (0) | 2023.08.24 |