প্রথম থেকেই কীভাবে একটি টেক্সারিয়ায় ক্যারেট কলাম (পিক্সেল নয়) পজিশন পাবেন?

Question

আপনি কীভাবে <textarea>জাভাস্ক্রিপ্ট ব্যবহার করে ক্যারেটের অবস্থান পাবেন ?

উদাহরণ স্বরূপ: This is| a text

এই ফিরে আসা উচিত 7।

কার্সার / নির্বাচনের চারপাশে থাকা স্ট্রিংগুলি ফেরত পেতে আপনি কীভাবে তা পাবেন?

উদাহরণ: 'This is', '', ' a text'।

যদি শব্দটি হ'ল হয় তবে তা ফিরে আসবে 'This ', 'is', ' a text'।

Comments

এই প্রশ্নের দেখুন: stackoverflow.com/questions/164147/... এবং যদি আপনি নতুন লাইন থাকবে সেই এখানেও নোট: stackoverflow.com/questions/235411/...

— bobince

আপনি jQuery ব্যবহার করে থাকেন আপনি ব্যবহার করতে পারেন jQuery ক্যারেট প্লাগইন $ ( 'পাঠ্য এলাকা') getSelection () শুরু।। Plugins.jquery.com/plugin-tags/caret @ ++,

— redochka

Blog.vishalon.net/index.php/… এ একটি ভাল সমাধান পেয়েছি আমি এটি ফায়ারফক্স এবং ক্রোমে পরীক্ষা করেছি এবং এটি উভয় ক্ষেত্রেই কাজ করেছে। লেখক বলেছেন যে এটি আই + অপেরাতেও কাজ করে।

— পাইকোডার112358

সরল ব্যবহার textarea.selectionStart, textarea. selectionEnd, textarea.setSelectionRange developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement

— EAndreyF

Answer 1

ফায়ারফক্স, সাফারি (এবং অন্যান্য গেকো ভিত্তিক ব্রাউজার) এর সাহায্যে আপনি টেক্সারিয়া.স্লেশনস্টার্টটি সহজেই ব্যবহার করতে পারেন, তবে আইইয়ের জন্য এটি কার্যকর হয় না, তাই আপনাকে এই জাতীয় কিছু করতে হবে:

function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}

( এখানে সম্পূর্ণ কোড )

আমি আপনাকে jQuery ফিল্ডস্লেশন প্লাগইন চেক করার পরামর্শ দিচ্ছি , এটি আপনাকে আরও অনেক কিছু করতে দেয় ...

সম্পাদনা করুন: আমি আসলে উপরের কোডটি পুনরায় প্রয়োগ করেছি:

function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
  }  
  return 0; 
}

এখানে একটি উদাহরণ পরীক্ষা করুন ।

Comments

ক্যারেটটি খালি লাইনে স্থাপন করা হলে ক্যারেটের অবস্থানগুলির মধ্যে পার্থক্য হয় না। দেখুন stackoverflow.com/questions/3053542/...

— টিম নিচে

এই উত্তরটি খালি লাইন সমস্যার সাথে মোকাবিলা করে না।

— টিম ডাউন

আমি কীভাবে এটি কনটেন্টেডেবল ডিভের জন্য ব্যবহার করতে পারি?

— মুহামমেট গ্যাক্টর্ক আয়ান

আপনি এই উত্তরটি কিছুটা উচ্চারণ করতে চাইতে পারেন, Safari (and other Gecko based browsers)বোঝা যাচ্ছে যে সাফারি গেকো ব্যবহার করে। গেকো মজিলার ইঞ্জিন; সাফারি ওয়েবকিট ব্যবহার করে।

— অপ্রয়োজনীয় কোড

0 পজিশনে ক্যারেট পরীক্ষায় ব্যর্থ হবে if (el.selectionStart) { return el.selectionStart; }...

— Okm

Answer 2

আপডেট হয়েছে 5 সেপ্টেম্বর 2010

প্রত্যেকে যেমন এই সমস্যার জন্য এখানে নির্দেশ পেয়েছে বলে মনে হচ্ছে, আমি আমার উত্তরটি একইরকম প্রশ্নের সাথে যুক্ত করছি, যার উত্তরটির মতো একই কোড রয়েছে তবে আগ্রহীদের জন্য পুরো পটভূমি সহ:

আইই এর ডকুমেন্ট.স্লেশন.ক্রিয়েটরেঞ্জের মধ্যে ফাঁকা লাইনগুলি শীর্ষস্থানীয় বা অনুসরণ করার অন্তর্ভুক্ত নয়

আইলিতে লম্বালম্বি বিরতি রোধের জন্য অ্যাকাউন্টিং করা জটিল, এবং আমি এই প্রশ্নের অন্য কোনও উত্তর সহ সঠিকভাবে এটির কোনও সমাধান দেখিনি। তবে, নিম্নলিখিত ফাংশনটি ব্যবহার করে এটি সম্ভব, যা আপনাকে নির্বাচনের শুরু এবং শেষটি কোনও <textarea>পাঠ্যের মধ্যে বাছাইয়ের (যা একটি কেরেটের ক্ষেত্রে একই রকম) ফিরিয়ে দেবে <input>।

নোট করুন যে টেক্সারিয়ায় আইইতে সঠিকভাবে কাজ করার জন্য এই ফাংশনটির জন্য ফোকাস থাকতে হবে। যদি সন্দেহ হয় তবে focus()প্রথমে টেক্সারিয়ার পদ্ধতিটি কল করুন ।

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

Comments

মাফ করবেন তবে ' রেঞ্জ অ্যান্ড অ্যান্ড রেঞ্জ.প্যারেন্টেলমেন্ট () ' এর অর্থ কী?

— sergzach

আইইতে কেরেটের অবস্থান পেতে চাইলে একটি সমস্যা আছে (যদি নির্বাচনটি ফাঁকা থাকে)। এই ক্ষেত্রে এটি ফেরৎ 0 শুরু ও যেমন স্ট্রিং দৈর্ঘ্য শেষ হিসাবে (যদি আমরা ব্যবহার সত্য পরিবর্তে পরিসীমা && range.parentElement () == এল )।

— sergzach

@ সের্গজাখ: range && range.parentElement() == elনির্বাচনটি টেক্সারিয়ার মধ্যে রয়েছে এবং তা প্রয়োজনীয় কিনা তা পরীক্ষা করার আছে। টেক্সারিয়ায় ফোকাস থাকাকালীন এতদিন কেরেটের অবস্থানটি গ্রহণের ক্ষেত্রে কোনও সমস্যা নেই । যদি অনিশ্চিত হয়, কল করার focus()আগে টেক্সারিয়ার পদ্ধতিটি কল করুন getInputSelection()। আমি উত্তরে একটি নোট যুক্ত করব।

— টিম ডাউন

@ টিম: নির্বাচনটি প্রকাশ করার জন্য একটি ডিভ উপাদানটিতে ক্লিক করার সময় "শুরু" এবং "শেষ" সর্বদা একই থাকে।

— মিশা মোরোশকো

@ মিশা: এটি ফাংশনের দোষ নয়: ফাংশনটি সম্পাদনের সময় এটিই আসলে নির্বাচিত হয়। সতর্কতা বাক্সটি খারিজ করার পরে আপনি এটি দেখতে পারবেন। আমি আপনার সাম্প্রতিক প্রশ্নের আমার উত্তর উল্লেখ করা হয়েছে, দুটি সম্ভাব্য সমাধান নীচে উপস্থিত ব্যবহার করছেন mousedownঘটনা বা যোগ unselectable="on"করার <div>উপাদান।

— টিম ডাউন

Answer 3

আমি উপরের ফাংশনটি সংশোধন করে আইই-তে গাড়ীর রিটার্নের জন্য অ্যাকাউন্ট করতে পারি। এটি অপরিবর্তিত তবে আমি এটির সাথে আমার কোডে কিছু অনুরূপ করেছি যাতে এটি কার্যকর হয়।

function getCaret(el) {
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
    rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    var add_newlines = 0;
    for (var i=0; i<rc.text.length; i++) {
      if (rc.text.substr(i, 2) == '\r\n') {
        add_newlines += 2;
        i++;
      }
    }

    //return rc.text.length + add_newlines;

    //We need to substract the no. of lines
    return rc.text.length - add_newlines; 
  }  
  return 0; 
}

Answer 4

আপনি ইন্টারনেট সমর্থন করার জন্য না থাকে তাহলে, আপনি ব্যবহার করতে পারেন selectionStartএবং selectionEndগুণাবলীর textarea।

ক্যারেট অবস্থান পেতে কেবল ব্যবহার করুন selectionStart:

function getCaretPosition(textarea) {
  return textarea.selectionStart
}

নির্বাচনের চারপাশে থাকা স্ট্রিংগুলি পেতে, নিম্নলিখিত কোডটি ব্যবহার করুন:

function getSurroundingSelection(textarea) {
  return [textarea.value.substring(0, textarea.selectionStart)
         ,textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
         ,textarea.value.substring(textarea.selectionEnd, textarea.value.length)]
}

জেএসফিডেলে ডেমো ।

এইচটিএমএল টেক্সটআরিএলেটমেন্ট ডক্সও দেখুন ।