বিতর্কযোগ্য, পাঠ্যের শেষে ক্যারেট সেট করুন (ক্রস ব্রাউজার)

Question

ক্রোমে আউটপুট :

<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
    hey
    <div>what's up?</div>
<div>
<button id="insert_caret"></button>

আমি এফএফ-তে বিশ্বাস করি এটি দেখতে এরকম কিছু দেখবে:

hey
<br />
what's up?

এবং আইই তে :

hey
<p>what's up?</p>

দুর্ভাগ্যক্রমে, এটি তৈরির কোনও দুর্দান্ত উপায় নেই যাতে প্রতিটি ব্রাউজার <br />একটি ডিভ বা পি-ট্যাগের পরিবর্তে একটি সন্নিবেশ করায় , বা কমপক্ষে আমি অনলাইনে কিছুই খুঁজে পাই না।

---

যাইহোক, আমি এখন যা করার চেষ্টা করছি তা হ'ল, যখন আমি বোতামটি টিপব , আমি চাইছি পাঠ্যের শেষে ক্যারেটটি সেট করা উচিত, তাই এটির মতো কিছু হওয়া উচিত:

hey
what's up?|

এটি করার কোনও উপায় যাতে এটি সমস্ত ব্রাউজারে কাজ করে ?

উদাহরণ:

$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -> end pos
     }
 }

Comments

এটি আমার জন্য সেরা কাজ

— Илья Зеленько

Answer 1

নিম্নলিখিত ফাংশনটি সমস্ত প্রধান ব্রাউজারে এটি করবে:

function placeCaretAtEnd(el) {
    el.focus();
    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();
    }
}

placeCaretAtEnd( document.querySelector('p') );

p{ padding:.5em; border:1px solid black; }

<p contentEditable>foo bar </p>

শুরুতে ক্যারেট স্থাপন প্রায় একই রকম: এটির জন্য কলগুলিতে পাস করা বুলিয়ান পরিবর্তন করা দরকার collapse()। এখানে একটি উদাহরণ যা শুরুতে এবং শেষে ক্যারেট স্থাপনের জন্য ফাংশন তৈরি করে:

function createCaretPlacer(atStart) {
    return function(el) {
        el.focus();
        if (typeof window.getSelection != "undefined"
                && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(atStart);
            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(atStart);
            textRange.select();
        }
    };
}

var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);

Comments

ক্রোমের সাথে কাজ করে না কারণ ক্রিয়েটেক্সট্রেঞ্জ কোনও মানক ফাংশন নয়। স্ট্যাকওভারফ্লো . com/a/41743191/700206 দেখুন ।

— হুইটনিল্যান্ড

@ লি: এটি ক্রোমে দুর্দান্ত কাজ করে, যা সমর্থন করে window.getSelectionএবং document.createRange। createTextRangeশাখা ইন্টারনেট এক্সপ্লোরার পুরানো সংস্করণ জন্য।

— টিম ডাউন

লেখার সময় window.getSelectionসমস্ত ব্রাউজারের 0.29% (IE> 8) সমর্থন করে না। দেখুন: caniuse.com/#search=window.getSelection

— w.stoettinger

@ টিমডাউন এটি কাজ করে। +1 টি। তবে আপনি দয়া করে মন্তব্য যুক্ত করে কোডটি ব্যাখ্যা করতে পারেন? দুর্দান্ত হবে

— শিনোবি

কোনও আইফ্রেমে> বডি এলিমেন্টকে টার্গেট করার চেষ্টা করার সময় ক্যারেটটি কীভাবে শেষ করতে হবে (এই কোডটি ব্যবহার করুন) জানেন? শরীরের উপাদান আছে editablecontent="true"...? placeCaretAtEnd(this);আমার জন্য কাজ করবে না।

— রবটিএ

Answer 2

দুর্ভাগ্যক্রমে টিমের দুর্দান্ত উত্তরটি আমার জন্য কেবল শেষে রাখার জন্য কাজ করেছিল, শুরুতে রাখার জন্য আমাকে এটিকে কিছুটা সংশোধন করতে হয়েছিল।

function setCaret(target, isStart) {
  const range = document.createRange();
  const sel = window.getSelection();
  if (isStart){
    const newText = document.createTextNode('');
    target.appendChild(newText);
    range.setStart(target.childNodes[0], 0);
  }
  else {
    range.selectNodeContents(target);
  }
  range.collapse(isStart);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  target.select();
}

নিশ্চিত focus()এবং না যদিও select()আসলে প্রয়োজন হয়।

Comments

আপনি একটি বাহ্যিক গ্রন্থাগারও চালু করেছিলেন। আপনি যদি মনে করেন না যে ফোকাস এবং নির্বাচন করা দরকার তবে কেন লাইনগুলি মন্তব্য করে তা পরীক্ষা করা হচ্ছে না?

— dotnethaggis

ধন্যবাদ, সরানো jquery। আমার মনে আছে আমার কিছু বিপরীত ফলাফল ছিল, আমি সেগুলি আবার আলাদা করার চেষ্টা করব।

— বিবর্ণ করুন

Answer 3

এই (লাইভ) উদাহরণটি একটি সংক্ষিপ্ত সাধারণ ফাংশন দেখায় setCaretAtStartEnd, যা দুটি আর্গুমেন্ট গ্রহণ করে; ক্যারেটটি রাখার জন্য একটি (সম্পাদনযোগ্য) নোড এবং একটি বুলিয়ান কোথায় রাখবে তা নির্দেশ করে (নোডের শুরু বা শেষ)

const editableElm = document.querySelector('[contenteditable]');

document.querySelectorAll('button').forEach((elm, idx) => 
  elm.addEventListener('click', () => {
    editableElm.focus()
    setCaretAtStartEnd(editableElm, idx) 
  })
)

function setCaretAtStartEnd( node, atEnd ){
  const sel = document.getSelection();
  node = node.firstChild;

  if( sel.rangeCount ){
      ['Start', 'End'].forEach(pos =>
        sel.getRangeAt(0)["set" + pos](node, atEnd ? node.length : 0)
      )
  }
}

[contenteditable]{ padding:5px; border:1px solid; }

<h1 contenteditable>Place the caret anywhere</h1>
<br>
<button>Move caret to start</button>
<button>Move caret to end</button>

Answer 4

আপনি যদি গুগল ক্লোজার সংকলক ব্যবহার করে থাকেন তবে আপনি নিম্নলিখিতটি করতে পারেন (টিমের উত্তর থেকে কিছুটা সরলীকৃত):

function placeCaretAtEnd(el) {
    el.focus();
    range = goog.dom.Range.createFromNodeContents(el);
    range.collapse(false);
    range.select();
}

ক্লোজার স্ক্রিপ্টে এখানে একই জিনিস:

(defn place-caret-at-end [el] 
   (.focus el)
   (doto (.createFromNodeContents goog.dom.Range el)
         (.collapse false)
         .select))

আমি এটি Chrome, সাফারি এবং ফায়ারফক্সে পরীক্ষা করেছি, IE সম্পর্কে নিশ্চিত নই ...

Comments

পরিসীমা = goog.dom.Range.createFromNodeContents (el); গুগডম কী?

— আনহ Tú

এটি আমার পক্ষে কাজ করেছে। @ আনহটি: গুগডম একটি ক্লোজার-লাইব্রেরি দ্বারা সরবরাহ করা একটি নাম স্থান।

— ডেভিড বেনিš