संतुष्ट करने के लिए ENTER - Chrome पर <div> जोड़कर रोकें

Question

मेरे पास एक contenteditableतत्व है, और जब भी मैं कुछ सामान टाइप करता हूं और हिट ENTERकरता है तो एक नया बनाता है <div>और नई लाइन टेक्स्ट को वहां रखता है। मुझे यह थोड़ा पसंद नहीं है।

क्या ऐसा होने से रोकना संभव है या कम से कम इसे एक के साथ बदलना है <br>?

यहाँ डेमो http://jsfiddle.net/jDvau/ है

नोट: यह फ़ायरफ़ॉक्स में कोई समस्या नहीं है।

Comments

फ़ायरफ़ॉक्स जोड़ता है <br>, क्रोम - नहीं, लेकिन अपनी शैलियों को ठीक करने के बाद, अतिरिक्त divs बाईं गद्दी को नहीं तोड़ते हैं। सवाल यह है कि आपको यह पसंद क्यों नहीं है? सोचें कि यह br है ... jsfiddle.net/jDvau/1 इसके अलावा आप DOMSubtreeModified ईवेंट का उपयोग इन divs को पकड़ने और उन्हें हटाने के लिए कर सकते हैं।

— विलीसुएल

stackoverflow.com/questions/6024594/… यह आपकी मदद कर सकता है, अच्छी किस्मत!

— सिरिकॉन

मेरे लिए ब्लेक प्लंब का समाधान सबसे सरल और यहाँ से सबसे अच्छा नीचे है।

— संवत्

@svassr वह बिंदु नहीं है, यह आप या मैं नहीं है जो इसका उपयोग करेगा, यह एक ऐसा ग्राहक है जिसे शायद यह भी नहीं पता होगा कि बदलाव क्या है।

— इकोनॉर

दरअसल यह सब कुछ बदल देता है। उन्होंने कहा कि यह एक सामान्य व्यवहार और छोटी मदद का संदेश है। "एक आदमी को एक मछली दें और आप उसे एक दिन के लिए खिलाएं। एक आदमी को मछली सिखाएं और आप उसे जीवन भर के लिए खिलाएं।"

— svassr

Answer 1

इसे इस्तेमाल करे:

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

डेमो के लिए यहां क्लिक करें

Comments

लेकिन मुझे यहां थोड़ा अंतर लगता है। अपने कर्सर को केवल रिक्त रेखा ("कुछ सामान टाइप करें" के शीर्ष पर), और एंटर दबाएं। कर्सर अब "टाइप" से ठीक पहले है, न कि नई ब्लैंक लाइन पर।

— एंड्रयू

यह IE11 में काम नहीं करता है क्योंकि यह इन्सर्ट HTML का समर्थन नहीं करता है। नीचे देखें जवाब!

— webprogrammer

यदि आप अपने कर्सर को पात्रों के बीच रखते हैं जैसे। 'टायर [कर्सर] पे कुछ सामान' और हिट दर्ज करें, आपको 1 पंक्ति बहुत अधिक मिलती है।

— चंद्रोदय

उत्तर स्वीकार्य नहीं है। समाधान केवल एक ही होगा <br />

— raoulinski

यह वापसी <br> और <div>

— निषाद अप

Answer 2

आप इसे केवल सीएसएस परिवर्तन के साथ कर सकते हैं:

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

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

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

Comments

जब मैं इनलाइन-ब्लॉक का उपयोग करता था, तो एक समस्या थी, कुछ भी सम्मिलित करने के लिए execCommand ("सम्मिलित HTML", xxx) निष्पादित करें, Chrome33 में परीक्षण किए गए सम्मिलित तत्व के अंत में एक "<br>" जोड़ा जाएगा।

— Imskull

अच्छा लगा। अफसोस की बात है कि यह स्थिति पर काम नहीं करेगा: निरपेक्ष तत्व या तत्व जो प्रदर्शन के साथ माता-पिता के प्रत्यक्ष बच्चे हैं: फ्लेक्स। आप इसे ध्यान में रखते हुए काम करने के लिए इसे हैक कर सकते हैं। बस सुनिश्चित करें कि यह फ्लेक्स तत्वों का प्रत्यक्ष बच्चा नहीं है। यदि आपको इसकी स्थिति की आवश्यकता है: निरपेक्षता बस इसके साथ एक अतिरिक्त माता-पिता दें।

— संशय

@ReinoutvanKempen 3 महीने पहले फ्लेक्स का उपयोग करना शुरू किया। मुझे लगता है कि यह हैक काम नहीं करेगा

— किट्टू

यह वास्तव में सबसे बड़ा समाधान है, यह अत्यधिक साफ और स्पष्ट है, कुछ भी नहीं डाला जाएगा, यहां तक ​​कि ब्र भी शामिल हैं। और विशेष रूप से जे एस के बिना इस समाधान।

— ओर्का

वाह ... यह क्रोम हल करता है, लेकिन फ़ायरफ़ॉक्स प्रवेश पर divs जोड़ना शुरू कर देता है, जो यह डिफ़ॉल्ट रूप से नहीं करता है।

— 15 नवंबर को cbdeveloper

Answer 3

शैली जोड़ें display:inline-block;करने के लिए contenteditable, यह उत्पन्न नहीं करेगा div, pऔर spanChrome में।

Comments

यह एक बेहतरीन उपाय है। *[contenteditable="true"]{display: inline-block;}

— इरीकजबस्टी

इसे प्यार करो, सरल लेकिन प्रभावी है

— user25794

IE11 में यह एक अतिरिक्त बना देगा <p></p> :(

— बेट्टी सेंट

लेकिन यह एक और बहुत कष्टप्रद क्रोम बग (क्या एक चमकदार ब्राउज़र) बनाएगा

— vsync

Chrome संस्करण 63.0.3239.84

— Mikaël मेयर

Answer 4

इसे इस्तेमाल करे:

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

Comments

अच्छा, काम करता है :) मुझे निर्णय लेने से पहले अधिक ध्यान देना होगा, धन्यवाद।

— इकोनॉर

फ़ायरफ़ॉक्स पर ठीक से काम नहीं करता है। यह एक अतिरिक्त लाइन जोड़ता है।

— 12

inputजब आप एंटर दबाते हैं तो यह ट्रिगर नहीं होता है। एक सरल उपाय: sth जैसे$(this).trigger('input')

— LarsW

insertHTMLसमाधान कुछ अजीब बातें जब वहाँ नेस्टेड हैं करता है contenteditable, तत्व अपने समाधान में गतिरोध उत्पन्न कि लेकिन वहाँ कुछ और मुद्दे हैं, मैं इसे एक नया संभव समाधान के रूप में जोड़ा।

— स्करिट

क्रोम पर काम नहीं करता है। पहली बार जब आप स्ट्रिंग के अंत में एंटर दबाते हैं, तो यह एक स्पेस जोड़ता है। दूसरी बार हालांकि यह काम करता है।

Answer 5

document.execCommand('defaultParagraphSeparator', false, 'p');

यह पैराग्राफ के बजाय डिफ़ॉल्ट व्यवहार को ओवरराइड करता है।

क्रोम पर दर्ज पर डिफ़ॉल्ट व्यवहार है:

<div>
    <br>
</div>

उस आदेश के साथ यह होने वाला है

<p>
    <br>
</p>

अब जब कि यह अधिक रैखिक है, तो यह केवल <br>आपके लिए आवश्यक होगा।

Comments

जब आप एंटर दबाते हैं तो div और br के बजाय आपके पास p और br accross ब्राउज़र होगा। कोशिश करो।

— गत

धन्यवाद! स्पष्टीकरण हमेशा मददगार होते हैं

— jpaugh

@jpaugh np, मैंने अपना उत्तर आगे संपादित किया ताकि यह बेहतर तरीके से समझा सके।

— सीएसएस

यह फ़ायरफ़ॉक्स पर काम नहीं करता है (मैंने क्रोम और फ़ायरफ़ॉक्स में ही परीक्षण किया है)

— medBouzid

फ़ायर्फ़ॉक्स को अब डिफ़ॉल्ट पैराग्राफ सेपरेटर का सम्मान करने के लिए तय किया गया है। IMHO इस उत्तर को सबसे अच्छा बनाता है क्योंकि यह सभी ब्राउज़रों को सुसंगत बनाता है और ऐनक के साथ इनलाइन करता है। यदि आप तब P टैग नहीं चाहते हैं तो सामग्री संपादन योग्य पिछले पाठ ब्लॉक से एक मार्जिन 'रिक्ति' है तो आप इसे संशोधित करने के लिए css का उपयोग कर सकते हैं।

— ब्लैकमम्बा

Answer 6

केवल एक टैग लगाने या टैग में अपना पाठ लपेटने के बजाय shift+ का उपयोग करें ।enterenter<br><p>

Comments

+1 धन्यवाद, यह जानना बहुत आसान है, लेकिन अगर आपके पास कोई क्लाइंट है जो एक किताब लिख रहा है, तो उसे ***

— iConnor

यदि आप सामग्री को चिपका रहे हैं तो यह मदद नहीं करता है

— vsync

Answer 7

contenteditableआपके द्वारा दबाए जाने enterपर व्यवहार करने का तरीका ब्राउज़र पर निर्भर करता है, <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);
            }
        }
    });
}

मुझे आशा है कि यह मेरी अंग्रेजी के लिए मदद करेगा, और क्षमा करें यदि यह आवश्यकतानुसार स्पष्ट नहीं है।

संपादित करें : हटाए गए jQuery फ़ंक्शन का सुधारjQuery.browser

Comments

बस आपको बता दें, jQuery.browserअब jQuery का हिस्सा नहीं है।

— इकोनॉर

आप सही है, मैं कुछ प्रयोग की तरह यह उल्लेख करना चाहिए navigator.userAgent.indexOf("msie") > 0औरnavigator.userAgent.indexOf("webkit") > 0

— एली

if( ( e.keyCode || e.witch ) == 13 ) { ... }जरूरत हैif (e.keyCode === 13 || e.which === 13) { ... }

— सेबस्टियन सैंडकविस्ट

Answer 8

आपके पास <p>टैग का उपयोग <br>करने के बजाय प्रत्येक पंक्ति के लिए अलग-अलग टैग हो सकते हैं और अधिक से अधिक ब्राउज़र संगतता प्राप्त कर सकते हैं ।

ऐसा करने के लिए, <p>सामग्री-योग्य div के अंदर कुछ डिफ़ॉल्ट पाठ के साथ एक टैग लगाएं।

उदाहरण के लिए, इसके बजाय:

<div contenteditable></div>

उपयोग:

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

jsfiddle

क्रोम, फ़ायरफ़ॉक्स और एज में परीक्षण किया गया है, और दूसरा प्रत्येक में समान काम करता है।

पहला, हालांकि, क्रोम में divs बनाता है, फ़ायरफ़ॉक्स में लाइन ब्रेक बनाता है, और एज में divs बनाता है और कर्सर को अगले एक में जाने के बजाय वर्तमान div की शुरुआत में वापस रखा जाता है।

क्रोम, फ़ायरफ़ॉक्स और एज में परीक्षण किया गया।

Comments

यह वास्तव में एक बुरा समाधान नहीं है

— एरोनएचएस

Answer 9

मुझे हॉटलेट्स को हाथ लगाने के लिए मूसट्रैप का उपयोग करना पसंद है: https://craig.is/killing/mice

फिर, मैं तो बस अवरोधन घटना एक आदेश को क्रियान्वित करने में प्रवेश, 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>

सम्मिलित HTML का उपयोग करना भी संभव है :

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

Answer 10

डिव में एक डिफॉल्ट डिफॉल्ट जोड़ें

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

Comments

@connorspiracist को इसका खेद है document.body.div(आपको शायद divइसके सामान्य विचार को सही करने के लिए किसी अन्य कोड में डालने की आवश्यकता होगी )

— मैथ चिलर

Answer 11

मैं इस समस्या को ठीक करने के लिए स्टाइल (Css) का उपयोग करूँगा।

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

फ़ायरफ़ॉक्स वास्तव में एक ब्लॉक तत्व ब्रेक जोड़ता है
, जबकि क्रोम एक टैग में प्रत्येक अनुभाग को लपेटता है। आप सीएसएस पृष्ठभूमि के रंग के साथ divs 10px की पैडिंग देता है ।

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

वैकल्पिक रूप से, आप jQuery में समान वांछित प्रभाव को दोहरा सकते हैं:

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

यहाँ आपके fiddle http://jsfiddle.net/R4Jdz/7/ का कांटा है

Comments

यह कुछ लोगों की मदद कर सकता है, लेकिन मैं अनसेस्सेरी मार्कअप के बारे में अधिक चिंतित था, जैसा कि मैं अंतिम HTML ले रहा हूं contenteditableऔर इसे कहीं और उपयोग कर रहा

— हूं

Answer 12

आप अपने पैराग्राफ को <p>टैग के साथ रैप कर सकते हैं उदाहरण के लिए यह डिव के बजाय नई लाइन पर संलग्न होगा उदाहरण:
<div contenteditable="true"><p>Line</p></div>
नई स्ट्रिंग डालने के बाद:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>

Answer 13

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

Answer 14

Ckeditor का उपयोग करने का प्रयास करें। यह एसओएफ में भी इस तरह का प्रारूपण प्रदान करता है।

https://github.com/galetahub/ckeditor

Answer 15

पहले हमें यह देखने के लिए प्रत्येक कुंजी उपयोगकर्ता को दर्ज करने की आवश्यकता है कि यदि प्रवेश दबाया जाता है तो हम <div>निर्माण को रोकते हैं और हम अपना <br>टैग बनाते हैं ।

एक समस्या है, जब हम इसे बनाते हैं तो हमारा कर्सर उसी स्थिति में रहता है इसलिए हम अपने कर्सर को अंत में रखने के लिए चयन एपीआई का उपयोग करते हैं।

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

बेला

Answer 16

यह ब्राउज़र निर्देशित एचटीएमएल 5 एडिटर है। आप अपने पाठ को इसके साथ लपेट सकते हैं <p>...</p>, फिर जब भी आप एंटर करते हैं तो आपको प्राप्त होता है <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/

Answer 17

यह सभी प्रमुख ब्राउज़रों में काम करता है (क्रोम, फ़ायरफ़ॉक्स, सफारी, एज)

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>। लेकिन आप कोड को जोड़ सकते हैं अगर आप की जरूरत है कि नीचे ट्रिम करने के लिए।

ट्रेलिंग https://stackoverflow.com/a/61237737/670839 को निकालने के लिए इस उत्तर को जांचें<br>

Comments

क्या बिल्ली है? एकमात्र समाधान जो वास्तव में मेरे लिए काम करता है, वह पृष्ठ के नीचे हो सकता है? बहुत बहुत धन्यवाद।

— user12861

Answer 18

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>')

thisवास्तविक संदर्भ कहाँ है जिसका अर्थ है document.getElementById('test');।

Answer 19

इसे करने का दूसरा तरीका

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

Comments

यह टाइप करते ही कर्सर को आगे नहीं बढ़ने देता।

— जैक लू

यह अजीब है, मैंने अभी क्रोम और IE 11 में कोशिश की है और यह ठीक काम करता है। संदर्भ क्या आप मुझे बता सकते हैं कि आप किस ब्राउज़र का उपयोग कर रहे हैं? व्यवहार के बारे में और अधिक विवरण समस्या को हल करने के लिए सहायक होगा

— MrAJ

Answer 20

प्रत्येक प्रवेश कुंजी पर सामग्री संपादन योग्य Div में नई Div निर्माण रोकें: मेरे पास जो समाधान है वह बहुत सरल है:

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

यह --- इनर HTML कंटेंट न्यू एंट क्रिएशन को कंटेंट एडिटेबल डिव में प्रत्येक एंटर की पर रोकता है।

Answer 21

W3C एडिटर के ड्राफ्ट पर स्टेट्स को ContentEditable में जोड़ने के बारे में कुछ जानकारी दी गई है , और एंटर को दबाने पर नए एलिमेंट को जोड़ने के लिए ब्राउज़र को रोकने के लिए आप उपयोग कर सकते हैं plaintext-only।

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

Answer 22

इस व्यवहार को पूरी तरह से रोकना संभव है।

देखिए यह फील

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