ENTER - Chrome এ বিতর্কিত << ডিভিটি> যুক্ত করা রোধ করুন

Question

আমার একটি contenteditableউপাদান রয়েছে এবং যখনই আমি কিছু স্টাফ টাইপ করি এবং আঘাত ENTERকরি এটি একটি নতুন তৈরি করে <div>এবং সেখানে নতুন লাইনের পাঠ্য রাখে। আমি এই একটুখানি পছন্দ করি না।

এটি ঘটানো থেকে রোধ করা বা কমপক্ষে কেবল এটির সাথে প্রতিস্থাপন করা সম্ভব <br>?

এখানে ডেমো http://jsfiddle.net/jDvau/

দ্রষ্টব্য: এটি ফায়ার ফক্সে কোনও সমস্যা নয়।

Comments

ফায়ারফক্স অনলাইনে যোগ করে, ক্রোম - না, তবে আপনার স্টাইলগুলি ঠিক করার পরে অতিরিক্ত ডিভগুলি বাম প্যাডিং ভাঙবে না। আপনি কেন এটি পছন্দ করেন না প্রশ্ন? মনে হয় এটা বিআর হচ্ছে ... jsfiddle.net/jDvau/1 এছাড়াও আপনি এই আছে divs ধরা উপর DOMSubtreeModified ঘটনা ব্যবহার করেন এবং এগুলিকে অপসারণ করতে পারেন।

— ভিলিয়াসএল

stackoverflow.com/questions/6024594/… এটি আপনাকে সাহায্য করতে পারে, সৌভাগ্য!

— সিরিকন

আমার কাছে ব্লেক প্লাম্বের সমাধানটি সবচেয়ে সহজ এবং এখান থেকে সেরা।

— সোভাসার

@ এসবাসার এটির মূল বিষয় নয়, এটি আপনি বা আমিই এটি ব্যবহার করব না, এটি এমন এক ক্লায়েন্ট যা শিফট কী তা জানেন না।

— iConnor

আসলে এটি সবকিছু পরিবর্তন করে। এটি বলেছে যে এটি একটি সাধারণ আচরণ এবং ছোট সহায়তার বার্তাটি বাহু নয়। "একজনকে একটি মাছ দিন এবং আপনি তাকে একদিনের জন্য খাওয়ান a একজন লোককে মাছ ধরতে শেখান এবং আপনি তাকে আজীবন খাওয়ান।"

— সোভাসার

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

তবে আমি এখানে একটু পার্থক্য খুঁজে পাই। আপনার কার্সারটি খালি লাইনে ("কিছু জিনিস টাইপ করুন" এর শীর্ষে) রাখুন এবং এন্টার টিপুন। কার্সার এখন "টাইপ" এর ঠিক ঠিক আগে, নতুন ফাঁকা লাইনে নয়।

— অ্যান্ড্রু

এটি সন্নিবেশ এইচটিএমএল সমর্থন করে না কারণ এটি আই 11 এ কাজ করে না। নীচে উত্তর দেখুন!

— ওয়েবপ্রগ্রামার

আপনি যদি কার্সারকে অক্ষরের মধ্যে রাখেন যেমন। 'টায় [কার্সর] পে কিছু জিনিস' এবং এন্টার টিপুন, আপনি ১ টি লাইন অনেক বেশি পেয়েছেন।

— চান্ড্রু

উত্তর গ্রহণযোগ্য নয়। সমাধানটি কেবল

— একটিরই হবে

এই রিটার্ন <br> এবং <ডিভ> উভয়েই

— নিশাদ

Answer 2

আপনি কেবল একটি সিএসএস পরিবর্তন করে এটি করতে পারেন:

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

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

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

Comments

একটি সমস্যা ছিল যখন আমি ইনলাইন-ব্লক ব্যবহার করি, যে কোনও কিছু সন্নিবেশ করানোর জন্য এক্সিকিউট কম্যান্ড ("ইনসার্ট এইচটিএমএল", এক্সএক্সএক্সএক্সএক্স) ব্যবহার করি, Chrome33 এ পরীক্ষিত sertedোকানো উপাদানটির শেষে একটি "<br>" যুক্ত হবে।

— ইমসকুল

ভাল লাগছে। দুঃখজনকভাবে এটি পজিশনে কাজ করবে না: নিখুঁত উপাদান বা উপাদান যা প্রদর্শন সহ পিতামাতার সরাসরি শিশু are ফ্লেক্স। এটি মাথায় রেখেই আপনি এটি হ্যাক করতে পারেন। এটি নিশ্চিত করুন যে এটি ফ্লেক্স উপাদানগুলির সরাসরি শিশু নয়। আপনার যদি এটির অবস্থানের প্রয়োজন হয়: পরম এটি দিয়ে এটি কেবল অতিরিক্ত পিতামাতাকে দিন।

— স্কেপটিক

@ রাইনআউটওয়ান ক্যাম্পেন 3 মাস আগে ইতিমধ্যে ফ্লেক্স ব্যবহার শুরু করেছেন। আমার ধারণা হ্যাক এই কাজ করবে না

— কিট্টু

এটি একটি সত্যই সবচেয়ে বড় সমাধান, এটি চূড়ান্ত পরিষ্কার এবং পরিষ্কার, কিছুই sertোকানো হবে না, এমনকি বিআর অন্তর্ভুক্ত করবে। এবং বিশেষত জেএস ছাড়াই এই সমাধান।

— orca ডিফেন্ড

বাহ ... এটি ক্রোমকে সমাধান করে তবে ফায়ারফক্স এন্টারে ডিভ যোগ করতে শুরু করে, যা এটি ডিফল্টরূপে হয় না।

— সিবিডিভেলপার

Answer 3

শৈলী যোগ display:inline-block;করার contenteditable, এটা উৎপন্ন করা হবে না div, pএবং spanChrome এ স্বয়ংক্রিয়ভাবে।

Comments

এটি একটি দুর্দান্ত সমাধান। *[contenteditable="true"]{display: inline-block;}

— এরিকজবস্তি

এটি সহজ, সহজ তবে কার্যকর

— ব্যবহারকারী 25794

আইই ১১ এ এটি একটি অতিরিক্ত করে তুলবে <p></p> :(

— বেটি সেন্ট

তবে এটি আরেকটি খুব বিরক্তিকর ক্রোম বাগ তৈরি করবে (কী

— চটজলদি

ক্রোম সংস্করণ 63.0.3239.84- এর সাথে আর কাজ করে না

— মায়ার

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

ভাল, কাজ :) আমি সিদ্ধান্ত নেওয়ার আগে আমি আরও মনোযোগের জন্য অপেক্ষা করব, ধন্যবাদ।

— iConnor

ফায়ারফক্সে ঠিকমতো কাজ করে না। এটি একটি অতিরিক্ত লাইন যুক্ত করে।

— agpt

এটি এটিকে এমন করে তোলে যাতে inputআপনি এন্টার টিপলে ট্রিগার না হয়। একটি সহজ সমাধান: sth মত যোগ করুন$(this).trigger('input')

— LarsW

insertHTMLসমাধান কিছু অদ্ভুত জিনিষ আছে যখন নেস্টেড হয় না contenteditableউপাদান আপনার সমাধান circumvents যে কিন্তু আরো কিছু বিষয় আছে, আমি এটি একটি নতুন সম্ভাব্য সমাধান হিসাবে যুক্ত হয়েছে।

— skerit

ক্রোমে কাজ করে না। প্রথমবার যখন আপনি স্ট্রিংয়ের শেষে এন্টার টিপেন তখন এটি একটি স্থান যুক্ত করে। দ্বিতীয়বার যদিও এটি কাজ করে।

Answer 5

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

পরিবর্তে অনুচ্ছেদে এটি ডিফল্ট আচরণকে ওভাররাইড করে।

ক্রোম-এ প্রবেশের ডিফল্ট আচরণটি হ'ল:

<div>
    <br>
</div>

এই কমান্ড দিয়ে এটি হতে চলেছে

<p>
    <br>
</p>

এখন এটি আরও রৈখিক হয়ে উঠেছে কেবলমাত্র <br>আপনার প্রয়োজন হলে এটি করা সহজ ।

Comments

আপনি যখন এন্টার টিপেন তখন ডিভ এবং বিআর এর পরিবর্তে আপনার কাছে পি এবং বিআর ব্রাউজারটি থাকবে। চেষ্টা করে দেখুন

— সিড

ধন্যবাদ! ব্যাখ্যা সর্বদা সহায়ক

— jpaugh

@ jpaugh এনপি, আমি আমার উত্তরটি আরও সম্পাদনা করেছি যাতে এটি আরও ভাল ব্যাখ্যা করে।

— সিড

এটি ফায়ারফক্সে কাজ করে না (আমি কেবল ক্রোম এবং ফায়ারফক্সে পরীক্ষা করেছি)

— মেডবুজিড

ফায়ারফক্সকে এখন ডিফল্ট অনুচ্ছেদেপ্রেসেটর সম্মানের জন্য স্থির করা হয়েছে। এই উত্তরটি সেরা করুন কারণ এটি এখন সমস্ত ব্রাউজারগুলিকে সামঞ্জস্যপূর্ণ করে তোলে এবং নির্দিষ্ট বৈশিষ্টের সাথে ইনলাইন করে। আপনি যদি চান না যে কোনও পি ট্যাগটি সম্পাদনাযোগ্য কনটেন্টে পূর্ববর্তী পাঠ্য ব্লক থেকে একটি মার্জিন 'স্পেসিং' করতে পারে তবে আপনি এটি পরিবর্তন করতে সিএসএস ব্যবহার করতে পারেন।

— ব্ল্যাকমম্বা

Answer 6

কেবলমাত্র একটি একক ট্যাগ লাগাতে বা আপনার পাঠ্যকে ট্যাগগুলিতে মোড়ানোর পরিবর্তে shift+ ব্যবহার করুন ।enterenter<br><p>

Comments

+1 ধন্যবাদ, এটি জানার জন্য খুব সহজ, তবে আপনার কাছে যদি কোনও ক্লায়েন্ট রয়েছে যা একটি বই লিখছে, তবে তা ***

— আইকনোর

আপনি সামগ্রীতে আটকানো থাকলে এটি সাহায্য করবে না

— vsync

Answer 7

contenteditableআপনি যখন চাপছেন তখন যেভাবে আচরণ enterকরে তা ব্রাউজারগুলির উপর নির্ভর করে the<div> ওয়েবকিট (ক্রোম, সাফারি) এবং আইইতে ঘটে।

আমি কয়েক মাস আগে এটির সাথে লড়াই করেছি এবং আমি এটিকে সংশোধন করেছি:

//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 এর অংশ নয়।

— iConnor

আপনি ঠিক করেছি, আমি কিছু ব্যবহারের মত এই উল্লেখ এবং উচিত 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

হটকিগুলি হ্যান্ডল করার জন্য আমি মাউসট্র্যাপ ব্যবহার করতে চাই: 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/ ডকুমেন্ট / এক্সেককম্যান্ড

এটি ক্রোম 75 এবং নিম্নলিখিত সম্পাদনযোগ্য উপাদানটি ব্যবহার করে কাজ করে:

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

এইচটিএমএল সন্নিবেশ করাও সম্ভব :

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

Answer 9

ডিভ একটি প্রতিরোধ ডিফল্ট যোগ করুন

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

Comments

@ কনসারসপরিসিস্ট এর জন্য দুঃখিত document.body.div( divএটির সাধারণ ধারণাটি সংশোধন করার জন্য আপনাকে সম্ভবত অন্য কোনও কোড লিখতে হবে )

— ম্যাথ চিলার

Answer 10

আমি সমস্যাটি সমাধানের জন্য স্টাইলিং (সিএসএস) ব্যবহার করব।

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

ফায়ারফক্স প্রকৃতপক্ষে একটি ব্লক উপাদান বিরতি যুক্ত করেছে
, যেখানে ক্রোম প্রতিটি বিভাগকে একটি ট্যাগে আবৃত করে। আপনি CSS ব্যাকগ্রাউন্ড কালারের সাথে ডিভিএসকে 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/

Comments

এটি কিছু লোককে সহায়তা করতে পারে তবে আমি অনাকাঙ্ক্ষিত মার্কআপ সম্পর্কে বেশি উদ্বিগ্ন ছিলাম, কারণ আমি এর চূড়ান্ত এইচটিএমএল গ্রহণ করব contenteditableএবং এটি অন্য কোথাও ব্যবহার করব

— iConnor

Answer 11

আপনার <p>ব্যবহারের পরিবর্তে প্রতিটি লাইনের জন্য পৃথক ট্যাগ থাকতে পারে<br> এবং বাক্সের বাইরে বৃহত্তর ব্রাউজারের সামঞ্জস্যতা অর্জন ।

এটি করতে, সন্তোষজনক <p>ডিভের ভিতরে কিছু ডিফল্ট পাঠ্য সহ একটি ট্যাগ রাখুন।

উদাহরণস্বরূপ, পরিবর্তে:

<div contenteditable></div>

ব্যবহার করুন:

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

jsfiddle

ক্রোম, ফায়ারফক্স এবং এজতে পরীক্ষিত এবং দ্বিতীয়টি প্রতিটি ক্ষেত্রে একই কাজ করে।

প্রথমটি তবে ক্রোমে ডিভ তৈরি করে, ফায়ারফক্সে লাইন ব্রেক তৈরি করে, এবং এজে ডিভ তৈরি করে এবং কার্সারটিকে পরবর্তী ডিভের পরিবর্তে বর্তমান ডিভের শুরুতে রেখে দেওয়া হয়।

ক্রোম, ফায়ারফক্স এবং এজতে পরীক্ষিত।

Comments

এটি আসলে কোনও খারাপ সমাধান নয়

— অ্যারেএনএইচএস

Answer 12

আপনি <p>ট্যাগ সহ আপনার অনুচ্ছেদগুলি মোড়ানো করতে পারেন উদাহরণস্বরূপ এটি ডিভের পরিবর্তে নতুন লাইনে উপস্থাপিত হবে উদাহরণ:
<div contenteditable="true"><p>Line</p></div>
নতুন স্ট্রিং After োকানোর পরে:
<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>, তারপরে আপনি যখনই ENTER টিপবেন তখনই <p></p>। এছাড়াও, সম্পাদক এইভাবে কাজ করে আপনি যখনই SHIFT টিপুন + এটি প্রবেশ করান প্রবেশ করুন <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

কি হ্যাক? প্রকৃতপক্ষে আমার জন্য কাজ করা একমাত্র সমাধানটি কীভাবে এই পৃষ্ঠার নীচে হতে পারে? অনেক ধন্যবাদ.

— ব্যবহারকারী 12861

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

এটি টাইপ করার সাথে সাথে কার্সারটি এগিয়ে যেতে দেয় না।

— জ্যাক লু

এটি আশ্চর্যের বিষয়, আমি কেবল Chrome এবং IE 11 এ চেষ্টা করেছি এবং এটি দুর্দান্ত কাজ করে। রেফারেন্স আপনি দয়া করে আমাকে বলতে পারবেন আপনি কোন ব্রাউজারটি ব্যবহার করছেন? আচরণ সম্পর্কে আরও বিশদটি সমস্যা সমাধানে সহায়ক হবে

— MrAJ

Answer 20

প্রতিটি প্রবেশ কীতে কনটেন্টে সম্পাদনাযোগ্য ডিভের মধ্যে নতুন ডিভ সৃষ্টি রোধ করুন: আমি যে সমাধান পেয়েছি তা খুব সহজ:

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

এই --- অভ্যন্তরীণ এইচটিএমএল বিষয়বস্তু প্রতিটি প্রবেশ কীতে কনটেন্ট সম্পাদনাযোগ্য ডিভের মধ্যে নতুন ডিভ সৃষ্টি রোধ করে।

Answer 21

ডাব্লু 3 সি সম্পাদকের খসড়াতে কন্টেন্টএডেটিবেলে রাজ্যগুলি যুক্ত করার বিষয়ে কিছু তথ্য রয়েছে এবং আপনি যে প্রবেশদ্বারটি ব্যবহার করতে পারেন সেটিকে টিপে যখন নতুন উপাদান যুক্ত করার জন্য ব্রাউজারটি প্রতিরোধ করতে পারে plaintext-only।

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

Answer 22

সম্পূর্ণভাবে এই আচরণটি প্রতিরোধ করা সম্ভব।

এই ঝাঁকুনি দেখুন

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