একটি পাঠ্য ইনপুট ক্ষেত্রে কার্সারের অবস্থান (অক্ষরগুলিতে) পান

Question

আমি কীভাবে কোনও ইনপুট ক্ষেত্রের মধ্যে থেকে ক্যারেটের অবস্থান পেতে পারি?

গুগলের মাধ্যমে আমি কয়েকটি বিট এবং টুকরো পেয়েছি, তবে বুলেট প্রুফের কিছুই নেই।

মূলত jQuery প্লাগইনের মতো কিছু আদর্শ হতে পারে, তাই আমি সহজভাবে এটি করতে পারি

$("#myinput").caretPosition()

Comments

'কার্সার পজিশন' অনুসন্ধান করার চেষ্টা করুন, এটি আপনাকে আরও অনেক হিট দেবে, পাশাপাশি এসও-তে এই সম্পর্কে কিছু বিষয়।

— আলেক

টেক্সারিয়ায় কার্সার পজিশন কীভাবে পাওয়া যায় তার ডুপ্লিকেট ? । আরও দেখুন: ফিল্ডস্লেশন প্লাগইন

— CMS

@ সিএমএস একটিতে অবস্থানটি অনুসন্ধান করা <input>এটি এ-তে করার চেয়ে সহজ <textarea>।

— অ্যান্ড্রু মাও

@ অ্যান্ড্রুমাও: এবং পাঠ্যটি যদি স্ক্রল হয় এবং ক্যারেটটি অতীতের sizeঅক্ষর হয় তবে আরও শক্ত ।

— ড্যান ড্যাসকলেসকু

@ আলেক: আমি সম্মত যে ক্যারেটের পরিবর্তে কার্সার অনুসন্ধান করা আরও ফলাফল দিতে পারে। অন্য কোথাও নির্দেশিত হিসাবে, আমি শিখেছি যে ক্যারেট আরও উপযুক্ত শব্দ। একটি কার্সার যখন একটি কিছু একটি অবস্থান উপস্থাপন করে ক্যারেট টেক্সট বিশেষভাবে একটি অবস্থান উপস্থাপন করে।

— সানক্যাট 2000

Answer 1

আরও সহজ আপডেট:

field.selectionStart এই উত্তরে উদাহরণ ব্যবহার করুন ।

এটি নির্দেশ করার জন্য @ কমোনসেন্সকোডকে ধন্যবাদ।

---

পুরানো উত্তর:

এই সমাধানটি খুঁজে পেয়েছি। Jquery ভিত্তিক নয় তবে এটিকে jquery এ সংহত করতে কোনও সমস্যা নেই:

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}

Comments

else if (oField.selectionStart || oField.selectionStart == '0')হতে পারেelse if (typeof oField.selectionStart==='number')

— user2428118

"ওফিল্ড.ফোকাস ()" এর ধারণা কী? এটি এই লাইনটি ছাড়া আমার পক্ষে কাজ করে। আপনি যদি আপনার ইনপুটটিতে অস্পষ্ট ইভেন্টটি ব্যবহার করেন এবং কলব্যাকের ভিতরে সেই ফাংশনটি সম্পাদন করেন তবে সাবধান হন।

— কিরিল রেজনিকভ

আপনি কি এটি পরীক্ষা করছেন? বিভাগটি কেবলমাত্র আইইতে কার্যকর করা হলে এটি সম্পূর্ণ। আইইতে কেবলমাত্র একটি বিশ্বব্যাপী নির্বাচন রয়েছে, সে কারণেই এটি হয় document.selectionনা field.selectionবা কিছু। এছাড়াও, আইই 7 তে এটি সম্ভব ছিল (8+ এর মধ্যে এটি এখনও সম্ভব কিনা তা জানেন না) এবং কোনও নির্বাচন বাছাই না করেই টিএবি মাঠের বাইরে চলে যায়। এইভাবে, যখন পাঠ্যটি নির্বাচিত হয় তবে ক্ষেত্রটি কেন্দ্রীভূত হয় না, document.selectionশূন্য নির্বাচন ফিরিয়ে দেয়। এ কারণেই, এই বাগের জন্য কাজ হিসাবে, এটি পড়ার আগে আপনাকে উপাদানটিতে ফোকাস করতে হবে document.selection।

— বেজম্যাক্স

ক্রোম এবং ফায়ারফক্সের জন্য সর্বদা 0 পাচ্ছেন

— কৌশিক থানকি

Answer 2

দুর্দান্ত এক, ম্যাক্স ধন্যবাদ।

যদি কেউ এটিকে ব্যবহার করতে চায় তবে আমি তার উত্তরে কার্যকারিতাটি jQuery এ গুটিয়ে রেখেছি।

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

Comments

নয় input = $(this).get(0)হিসাবে একই input = this?

— মাইক

@ মাইক নং, জিকুয়েরি প্লাগইনে নেই। একটি প্লাগইনে thisএকটি সম্পূর্ণ মোড়ানো সেট বোঝায়। তার কোড যদিও এখনও ভুল, এটি ঠিক হওয়া উচিত this.get(0)। তার কোড সম্ভবত এখনও কাজ করেছে কারণ একটি মোড়ানো সেটটিকে পুনরায় মোড়ানো কোনও কাজ করে না।

— শেভ

এটি আমাকে ভুল তথ্য দেয়। পাঠ্য প্রবেশ করানোর সময় আমি কার্সারের অবস্থানগুলির দিকে তাকিয়ে ছিলাম। আমার ফিডল এটি দেখায়: jsfiddle.net/fallenreaper/TSwyk

— ফলানরেপার

ফায়ারফক্স ইনপুটটিতে একটি এনএস_এআরআরআর_ফিলিউর তৈরি করে se

— নিয়ালাল.কম্পবেল

আপনি যদি ফাংশনটির জন্য ব্যবহার যোগ করেন তবে নতুন মৌমাছিদের জন্য ভালো লাগবে

— মুহাম্মদ ওমর আসলাম

Answer 3

খুব সহজ

আপডেট উত্তর

ব্যবহার করুন selectionStart, এটি সমস্ত বড় ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ ।

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})

<input id="foobar" />

আপডেট: এটি কেবল তখনই কাজ করে যখন কোনও ধরণের সংজ্ঞা দেওয়া হয় না বা type="text"ইনপুট থাকে।

Comments

আমি যদি মাউস ব্যবহার করে অবস্থান পরিবর্তন করি তবে এটি কনসোলে মুদ্রিত হবে না। এটা ঠিক করার জন্য একটি উপায় আছে কি?

— ইউজিন বারস্কি

@ ইউজেনবারস্কি ক্লিক ইভেন্টের জন্য কেবল একটি নতুন ইভেন্ট শ্রোতা যুক্ত করুন। আপনি .selectionStartযে কোনও সময় সম্পত্তিটি পরীক্ষা করতে পারেন ( document.getElementById('foobar').selectionStart), এটি কোনও ইভেন্ট শ্রোতার মধ্যে থাকা উচিত নয়।

— জেজেজে

দুর্দান্ত, তবে ইনপুট ধরণের সংখ্যা হলে ফায়ারফক্স বা ক্রোমে কাজ করে না।

— অ্যাডাম আর গ্রে

Answer 4

খুব সহজ সমাধান পেয়েছি । যাচাই করা ফলাফল সহ নিম্নলিখিত কোডটি ব্যবহার করে দেখুন -

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

আমি তোমাকে দিচ্ছি ফিডল_ডেমো

Comments

sliceএটি তুলনামূলকভাবে ব্যয়বহুল অপারেশন এবং এটি এই 'সমাধান'-তে কোনও কিছুই যুক্ত করে না - el.selectionStartএটি আপনার স্লাইসের দৈর্ঘ্যের সমান; শুধু যে ফিরে। তদুপরি, অন্যান্য সমাধানগুলি আরও জটিল হওয়ার কারণ হ'ল তারা সমর্থন করে না এমন অন্যান্য ব্রাউজারগুলির সাথে ডিল করে selectionStart।

— এমপেন

আমি চাকরি ছেড়ে দিয়েছি যেখানে আমাকে যেমন ভেরিয়েবল নামের কোড সহ কাজ করতে হয়েছিল।

— মাইকেল শ্যাপার

@ মিশেল শ্যাপার - আপনার অর্থ এলিমেন্টের জন্য 'এল' এবং মানের জন্য 'ভাল'? এগুলি বেশ সাধারণ ...

— user2782001

@ ব্যবহারকারী2782001: আমি ভুল বানান — আমার প্রধান উদ্বেগ ছিল ফাংশনটির নাম। f1প্রায় 'ইউজার 2782001' হিসাবে অর্থবহ। 😉

— মাইকেল শ্যাপার

Answer 5

এর জন্য এখন একটি দুর্দান্ত প্লাগইন রয়েছে: ক্যারেট প্লাগইন

তারপরে আপনি পজিশনটি ব্যবহার করে পেতে পারেন $("#myTextBox").caret()বা এটির মাধ্যমে সেট করতে পারেন$("#myTextBox").caret(position)

Comments

ক্যারেট প্লাগইনটি

— পাঠ্য

ভাল আমি এটি <ইনপুট টাইপ = "পাঠ্য" আইডি = "মাই টেক্সটবক্স" /> এর জন্য কাজ করতে পেরেছি এবং উপরের কোডটি ব্যবহার করেছি।

— জেনস মিক্কেলসেন

Answer 6

   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

Answer 7

এখানে কয়েকটি ভাল উত্তর পোস্ট করা হয়েছে, তবে আমি মনে করি আপনি নিজের কোডটি সহজ করতে পারেন এবং inputElement.selectionStartসহায়তার জন্য চেকটি এড়িয়ে যেতে পারেন : এটি কেবলমাত্র আইই 8 এবং এর আগে সমর্থিত নয় ( ডকুমেন্টেশন দেখুন ) যা বর্তমান ব্রাউজার ব্যবহারের 1% এরও কম প্রতিনিধিত্ব করে ।

var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}

Answer 8

সম্ভবত আপনার কার্সার অবস্থানের পাশাপাশি একটি নির্বাচিত পরিসরও প্রয়োজন। এখানে একটি সাধারণ ফাংশন, আপনার এমনকি jQuery প্রয়োজন নেই:

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

ধরা যাক আপনি যখনই এটি পরিবর্তন করেন বা মাউস কার্সার অবস্থানটি সরিয়ে দেয় আপনি কোনও ইনপুটে কল করতে চান (এই ক্ষেত্রে আমরা jQuery ব্যবহার করছি .on())। পারফরম্যান্সের কারণে, ইভেন্টগুলি are setTimeout()েলে _debounce()দিলে এটি অ্যাডকোরসের মতো কিছু যুক্ত করা ভাল ধারণা হতে পারে :

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

আপনি যদি এটি দেখতে চান তবে এখানে একটি ঝাঁকুনি: https://jsfiddle.net/Dhaupin/91189tq7/

Answer 9

const inpT = document.getElementById("text-box");
const inpC = document.getElementById("text-box-content");
// swch gets  inputs .
var swch;
// swch  if corsur is active in inputs defaulte is false .
var isSelect = false;

var crnselect;
// on focus
function setSwitch(e) {
  swch = e;
  isSelect = true;
  console.log("set Switch: " + isSelect);
}
// on click ev
function setEmoji() {
  if (isSelect) {
    console.log("emoji added :)");
    swch.value += ":)";
    swch.setSelectionRange(2,2 );
    isSelect = true;
  }

}
// on not selected on input . 
function onout() {
  // الافنت  اون كي اب 
  crnselect = inpC.selectionStart;
  
  // return input select not active after 200 ms .
  var len = swch.value.length;
  setTimeout(() => {
   (len == swch.value.length)? isSelect = false:isSelect = true;
  }, 200);
}

<h1> Try it !</h1>
    
		<input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title">
		<input type="text" onfocus = "setSwitch(this)"  onfocusout = "onout()"  id="text-box-content" size="20" value="content">
<button onclick="setEmoji()">emogi :) </button>