ป้องกันไม่ให้เพิ่มเนื้อหาที่แก้ไขได้ <div> บน ENTER - Chrome

ฉันมีcontenteditableองค์ประกอบและเมื่อใดก็ตามที่ฉันพิมพ์บางสิ่งและกดENTERมันจะสร้างใหม่<div>และวางข้อความบรรทัดใหม่ไว้ที่นั่น ฉันไม่ชอบอันนี้เลยสักนิด

เป็นไปได้หรือไม่ที่จะป้องกันไม่ให้สิ่งนี้เกิดขึ้นหรืออย่างน้อยก็แทนที่ด้วย a <br>?

นี่คือการสาธิตhttp://jsfiddle.net/jDvau/

หมายเหตุ: นี่ไม่ใช่ปัญหาใน firefox

ลองสิ่งนี้:

$('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;
    }
});

คลิกที่นี่เพื่อสาธิต

คุณสามารถทำได้เพียงแค่เปลี่ยน CSS:

div{
    background: skyblue;
    padding:10px;
    display: inline-block;
}

pre{
    white-space: pre-wrap;
    background: #EEE;
}

http://jsfiddle.net/ayiem999/HW43Q/

เพิ่มรูปแบบdisplay:inline-block;การcontenteditableก็จะไม่สร้างdiv, pและspanใน Chrome โดยอัตโนมัติ

ลองสิ่งนี้:

$('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');

มันจะแทนที่พฤติกรรมเริ่มต้นเพื่อให้มีย่อหน้าแทน

ใน chrome พฤติกรรมเริ่มต้นของ Enter คือ:

<div>
    <br>
</div>

ด้วยคำสั่งนั้นมันจะเป็น

<p>
    <br>
</p>

ตอนนี้มันเป็นเส้นตรงมากขึ้นแล้วมันง่ายมากที่<br>คุณจะต้องทำเท่านั้น

ใช้shift+ enterแทนenterการใส่<br>แท็กเดียวหรือรวมข้อความของคุณไว้ใน<p>แท็ก

วิธีการcontenteditableทำงานเมื่อคุณกดenterขึ้นอยู่กับเบราว์เซอร์สิ่งที่<div>เกิดขึ้นบน webkit (chrome, safari) และ 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);
            }
        }
    });
}

ฉันหวังว่ามันจะช่วยได้และขออภัยสำหรับภาษาอังกฤษของฉันหากไม่ชัดเจนเท่าที่จำเป็น

แก้ไข : การแก้ไขฟังก์ชัน jQuery ที่ถูกลบออกjQuery.browser

คุณสามารถมี<p>แท็กแยกกันสำหรับแต่ละบรรทัดแทนที่จะใช้<br>แท็กและเพิ่มความเข้ากันได้ของเบราว์เซอร์นอกกรอบ

ในการดำเนินการนี้ให้ใส่<p>แท็กที่มีข้อความเริ่มต้นอยู่ภายใน div ที่แก้ไขเนื้อหาได้

ตัวอย่างเช่นแทนที่จะเป็น:

<div contenteditable></div>

ใช้:

<div contenteditable>
   <p>Replace this text with something awesome!</p>
</div>

jsfiddle

ทดสอบใน Chrome, Firefox และ Edge และอย่างที่สองใช้งานได้เหมือนกันในแต่ละรายการ

อย่างไรก็ตามขั้นแรกสร้าง div ใน Chrome สร้างตัวแบ่งบรรทัดใน Firefox และใน Edge จะสร้าง 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>

นอกจากนี้ยังสามารถใช้insertHTML :

window.document.execCommand('insertHTML', false, "\n");

เพิ่มค่าป้องกันเริ่มต้นให้กับ div

document.body.div.onkeydown = function(e) {
    if ( e.keycode == 13 ){
        e.preventDefault();
            //add a <br>
        div = document.getElementById("myDiv");
        div.innerHTML += "<br>";
    }
}

ฉันจะใช้สไตล์ (Css) เพื่อแก้ไขปัญหา

div[contenteditable=true] > div {
  padding: 0;
} 

Firefox เพิ่มตัวแบ่งองค์ประกอบบล็อก
ในขณะที่ 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/

คุณสามารถตัดย่อหน้าของคุณด้วย<p>แท็กได้เช่นมันจะขึ้นบรรทัดใหม่แทน div ตัวอย่าง:
<div contenteditable="true"><p>Line</p></div>
หลังจากแทรกสตริงใหม่:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>

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 cursor 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;
}

ลองใช้ ckeditor นอกจากนี้ยังมีการจัดรูปแบบเช่นนี้ใน SOF

https://github.com/galetahub/ckeditor

ก่อนอื่นเราต้องจับผู้ใช้คีย์ทุกคนเข้าเพื่อดูว่ากด Enter หรือไม่จากนั้นเราจะป้องกันการ<div>สร้างและสร้าง<br>แท็กของเราเอง

มีปัญหาอย่างหนึ่งเมื่อเราสร้างเคอร์เซอร์ของเราจะอยู่ที่ตำแหน่งเดิมดังนั้นเราจึงใช้Selection 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 + 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>

ตรวจสอบสิ่งนี้: http://jsfiddle.net/ZQztJ/

ใช้งานได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด (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://stackoverflow.com/a/61237737/670839

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'); //&nbsp;
   range.insertNode(nnode);
   this.appendChild(bnode);
   range.insertNode(nnode);                                
}
else
   document.execCommand('insertHTML', false, '<br><br>')

ในกรณีที่เป็นบริบทที่เกิดขึ้นจริงซึ่งหมายความว่าthisdocument.getElementById('test');

อีกวิธีหนึ่งที่จะทำได้

$('button').click(function(){
    $('pre').text($('div')[0].outerHTML)
});

$("#content-edit").keydown(function(e) {
    if(e.which == 13) {
       $(this).find("div").prepend('<br />').contents().unwrap();
      }
});

http://jsfiddle.net/jDvau/11/

ป้องกันการสร้าง Div ใหม่ใน Div ที่แก้ไขเนื้อหาได้ในแต่ละปุ่ม Enter: วิธีแก้ปัญหาที่ฉันพบนั้นง่ายมาก:

var newdiv = document.createElement("div"); 
newdiv.innerHTML = "Your content of div goes here";
myEditablediv.appendChild(newdiv);

สิ่งนี้ --- เนื้อหา innerHTML ป้องกันการสร้าง Div ใหม่ในเนื้อหา Div ที่แก้ไขได้ในแต่ละปุ่ม Enter

ใน Draft ของ W3C Editor มีข้อมูลบางอย่างเกี่ยวกับการเพิ่มสถานะในContentEditableและเพื่อป้องกันไม่ให้เบราว์เซอร์เพิ่มองค์ประกอบใหม่เมื่อกด Enter คุณสามารถplaintext-onlyใช้ได้

<div contentEditable="plaintext-only"></div>

เป็นไปได้ที่จะป้องกันพฤติกรรมนี้ทั้งหมด

ดูซอนี้

$('<div class="temp-contenteditable-el" contenteditable="true"></div>').appendTo('body').focus().remove();