Ngăn chặn thêm nội dung <div> trên ENTER - Chrome

Tôi có một contenteditableyếu tố, và bất cứ khi nào tôi gõ một số nội dung và nhấn ENTERnó sẽ tạo ra một dòng mới <div>và đặt văn bản dòng mới vào đó. Tôi không thích điều này một chút.

Có thể ngăn chặn điều này xảy ra hoặc ít nhất là chỉ thay thế nó bằng một <br>?

Đây là bản demo http://jsfiddle.net/jDvau/

Lưu ý: Đây không phải là một vấn đề trong firefox.

Thử cái này:

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

Bấm vào đây để demo

Bạn có thể làm điều này chỉ với một thay đổi CSS:

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

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

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

Thêm phong cách display:inline-block;đến contenteditable, nó sẽ không tạo ra div, pvà spantự động trong Chrome.

Thử cái này:

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

Nó ghi đè hành vi mặc định để có đoạn thay thế.

Trên chrome, hành vi mặc định khi nhập là:

<div>
    <br>
</div>

Với lệnh đó, nó sẽ là

<p>
    <br>
</p>

Bây giờ nó trở nên tuyến tính hơn, thật dễ dàng chỉ <br>có bạn sẽ cần.

Sử dụng shift+ enterthay vì enterchỉ đặt một <br>thẻ vào hoặc bọc văn bản của bạn trong <p>các thẻ.

Cách contenteditablehành xử khi bạn nhấn enterphụ thuộc vào trình duyệt,<div> xảy ra trên webkit (chrome, safari) và IE.

Tôi đã vật lộn với điều này vài tháng trước và tôi đã sửa nó theo cách này:

//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);
            }
        }
    });
}

Tôi hy vọng nó sẽ giúp ích, và xin lỗi cho tiếng Anh của tôi nếu nó không rõ ràng như cần thiết.

EDIT : Sửa lỗi hàm jQuery bị loại bỏjQuery.browser

Tôi thích sử dụng Mousetrap cho các phím nóng cầm tay: https://craig.is/killing/mice

Sau đó, tôi chỉ chặn sự kiện enter, thực thi lệnh insertLineBreak :

Mousetrap.bindGlobal('enter', (e)=>{
  window.document.execCommand('insertLineBreak', false, null);
  e.preventDefault();
});

Tất cả các lệnh: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Nó hoạt động bằng Chrome 75 và yếu tố có thể chỉnh sửa sau:

<pre contenteditable="true"></pre>

Cũng có thể sử dụng insertHTML :

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

thêm một ngăn chặn mặc định cho div

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

Tôi sẽ sử dụng kiểu dáng (Css) để khắc phục sự cố.

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

Firefox thực sự bổ sung phần ngắt khối
, trong khi Chrome kết thúc từng phần trong thẻ. Bạn css cung cấp cho div một phần đệm 10px cùng với màu nền.

div{
  background: skyblue;
  padding:10px;
}

Ngoài ra, bạn có thể sao chép hiệu ứng mong muốn tương tự trong jQuery:

var style = $('<style>p[contenteditable=true] > div { padding: 0;}</style>');
$('html > head').append(style);

Đây là một nhánh của fiddle của bạn http://jsfiddle.net/R4Jdz/7/

Bạn có thể có các <p>thẻ riêng cho từng dòng thay vì sử dụng<br> các thẻ và có được khả năng tương thích trình duyệt lớn hơn.

Để làm điều này, hãy đặt một <p>thẻ với một số văn bản mặc định bên trong div có thể nội dung.

Ví dụ: thay vì:

<div contenteditable></div>

Sử dụng:

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

jsfiddle

Đã thử nghiệm trong Chrome, Firefox và Edge và thứ hai hoạt động giống nhau ở mỗi cái.

Tuy nhiên, lần đầu tiên, tạo các div trong Chrome, tạo các ngắt dòng trong Firefox và trong Edge tạo các div và con trỏ được đặt lại ở đầu div hiện tại thay vì chuyển sang div tiếp theo.

Đã thử nghiệm trong Chrome, Firefox và Edge.

Bạn có thể bọc các đoạn văn bản của mình bằng <p>thẻ, ví dụ như nó sẽ xuất hiện trên dòng mới thay vì div Ví dụ:
<div contenteditable="true"><p>Line</p></div>
Sau khi chèn chuỗi mới:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>

Các inserHTMLgiải pháp lệnh thực hiện một số điều kỳ lạ khi bạn có lồng contenteditableyếu tố.

Tôi đã lấy một số ý tưởng từ nhiều câu trả lời ở đây, và điều này dường như phù hợp với nhu cầu của tôi bây giờ:

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

Hãy thử sử dụng ckeditor. Nó cũng cung cấp định dạng như thế này trong SOF.

https://github.com/galetahub/ckeditor

Trước tiên, chúng tôi cần nắm bắt mọi người dùng khóa nhập để xem nếu nhấn phím enter, chúng tôi sẽ ngăn chặn việc <div>tạo và chúng tôi tạo riêng của mình<br> thẻ .

Có một vấn đề, khi chúng tôi tạo nó, con trỏ của chúng tôi giữ nguyên vị trí, vì vậy chúng tôi sử dụng API lựa chọn để đặt con trỏ ở cuối.

Đừng quên thêm một <br>thẻ ở cuối văn bản của bạn bởi vì nếu bạn không nhập lần đầu tiên sẽ không làm một dòng mới.

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

Vĩ cầm

Đây là trình soạn thảo HTML5 hướng trình duyệt. Bạn có thể bọc văn bản của mình <p>...</p>, sau đó bất cứ khi nào bạn nhấn ENTER bạn nhận được <p></p>. Ngoài ra, trình chỉnh sửa hoạt động theo cách này mà bất cứ khi nào bạn nhấn SHIFT + ENTER, nó sẽ chèn <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>

Kiểm tra điều này: http://jsfiddle.net/ZQztJ/

Điều này hoạt động trong tất cả các trình duyệt chính (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>

Có một điều bất tiện. Sau khi bạn chỉnh sửa xong, các yếu tố có thể chứa một kết thúc <br>bên trong. Nhưng bạn có thể thêm mã để cắt giảm nếu bạn cần.

Kiểm tra câu trả lời này để xóa dấu vết <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>')

Đâu thislà bối cảnh thực tế có nghĩa là document.getElementById('test');.

Một cách khác để làm điều đó

$('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/

Ngăn chặn việc tạo Div mới trong nội dung Div có thể chỉnh sửa trên mỗi phím enter: Giải pháp mà tôi đã tìm thấy rất đơn giản:

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

Điều này --- nội dungHTML ngăn chặn việc tạo Div mới trong nội dung Div có thể chỉnh sửa trên mỗi phím enter.

Trên Bản nháp của W3C Editor, có một số thông tin về việc thêm trạng thái vào ContentEditable và để ngăn trình duyệt thêm phần tử mới khi nhấn enter, bạn có thể sử dụng plaintext-only.

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

Có thể ngăn chặn hành vi này hoàn toàn.

Xem câu đố này

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