এইচটিএমএল পাঠ্যবক্সে কীবোর্ড ক্যারেট অবস্থান নির্ধারণ করুন

Question

পাঠ্যবক্সের কীবোর্ড ক্যারেটকে কীভাবে একটি নির্দিষ্ট অবস্থানে নিয়ে যেতে জানেন কেউ?

উদাহরণস্বরূপ, যদি কোনও পাঠ্য-বাক্সে (উদাহরণস্বরূপ ইনপুট উপাদান, পাঠ্য-অঞ্চল নয়) এর মধ্যে 50 টি অক্ষর থাকে এবং আমি 20 অক্ষরের আগে ক্যারেটটি অবস্থান করতে চাই, তবে আমি কীভাবে এটি সম্পর্কে জানব?

এটি এই প্রশ্ন থেকে পৃথকীকরণে: টেক্সট এরিয়ায় jQuery সেট কার্সার অবস্থান , যার জন্য jQuery প্রয়োজন ery

Answer 1

জোশ স্টোডোলার সেটিং কীবোর্ড কেরেটের একটি অংশ টেক্সটবক্সে বা জাভাস্ক্রিপ্ট সহ টেক্সটআরিয়া থেকে উদ্ধৃত

একটি জেনেরিক ফাংশন যা আপনাকে পাঠ্যবক্স বা টেক্সেরিয়ার যে কোনও অবস্থাতে আপনার ইচ্ছা অনুযায়ী ক্যারেটটি সন্নিবেশ করতে দেয়:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

প্রথম প্রত্যাশিত প্যারামিটারটি আপনি যে কীবোর্ড ক্যারেটটি careোকাতে চান সেই উপাদানটির আইডি। যদি উপাদানটি সন্ধান করতে অক্ষম হয় তবে কিছুই হবে না (স্পষ্টতই)। দ্বিতীয় প্যারামিটারটি ক্যারেট পজিটোন সূচক index জিরো শুরুতে কীবোর্ড ক্যারেটটি রাখবে। যদি আপনি উপাদানগুলির মানের অক্ষরের সংখ্যার চেয়ে বড় একটি সংখ্যা পাস করেন তবে এটি কীবোর্ড ক্যারেটটি শেষে রাখবে।

আই 6 এবং তার উপরে পরীক্ষিত, ফায়ারফক্স 2, অপেরা 8, নেটস্কেপ 9, সিমনকি এবং সাফারি। দুর্ভাগ্যক্রমে সাফারিতে এটি অনফোকাস ইভেন্টের সাথে মিশে কাজ করে না)।

উপরের ফাংশনটি ব্যবহার করে উদাহরণস্বরূপ কীবোর্ড ক্যারেটকে পৃষ্ঠার সমস্ত পাঠেরের শেষের দিকে ঝাঁপিয়ে পড়তে বাধ্য করা হয় যখন তারা ফোকাস পান:

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

Comments

if(elem.selectionStart)ব্রেকস্টেশন যখন সিলেকশন স্টার্ট 0 হয় এছাড়াও jhnns এর উত্তর দ্বারা নির্দেশিত।

— mpartel

এটি আমার পক্ষে কাজ করে না। আমি যখন প্রকৃত পাঠ্যবাক্সটি ক্লিক করি তখন আমার কাছে আশা করা যায় যে প্রথমদিকে কেরেটের অবস্থান হবে। আমার ফ্রেড jsfiddle.net/khx2w

— elad.chen

সেটকারেটপজিশন ফাংশনটি ঠিক কাজ করে। আপনার অ্যাডএকশনহ্যান্ডলার ফাংশনটি অবশ্য তা করে না। তবে তা ছাড়াও আমি ফোকাসে সরানোর জন্য কার্সারটি পাইনি। সম্ভবত, কারণ ব্রাউজারটি ক্লিকের অবস্থানের ভিত্তিতে নিজেই কার্সারের অবস্থান নির্ধারণ করে। আমি যা বলতে পারি তার কাছাকাছি কোনও উপায় বলে মনে হচ্ছে না, তবে আমি সম্পূর্ণ ভুল হতে পারি।

— GJK

আইই 9, এফএফ 25 এ কাজ করে তবে ক্রোম 30 নয় none

— উম্বার ফেরুল

আমার elem.value = elem.value.replace(/^9/g,'+79')কোড আছে অপেরামিনির কার্সার পরে +। এই ফাংশনটি সাহায্য করে না

— এরি

Answer 2

উত্তরের লিঙ্কটি নষ্ট হয়ে গেছে, এটির একটি কাজ করা উচিত (সমস্ত ক্রেডিট blog.vishalon.net- এ যান ):

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

যদি কোডটি আবার হারিয়ে যায়, তবে এখানে দুটি প্রধান ফাংশন রয়েছে:

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}


function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}

Comments

বেস ফাংশনগুলির জন্য +1, যদিও কিছু সামঞ্জস্য করতে হবে । রেঞ্জের পদ্ধতিটি ব্যবহার করার সময়, "পোস্ট" থেকে রেখার সংখ্যা বাদ দিতে হয়।

— রব ডাব্লু

Answer 3

যেহেতু আসলেই আমার এই সমাধানটি সত্যিই প্রয়োজন, এবং আদর্শ বেসলাইন সমাধান ( ইনপুটকে ফোকাস করুন - তারপরে মানটি নিজের সমান নির্ধারণ করুন ) ক্রস ব্রাউজারে কাজ করে না, কাজ করার জন্য আমি কিছুটা টুইট করতে এবং সম্পাদনা করতে ব্যয় করেছি। @ কেডি 7 এর কোড তৈরি করে এখানে আমি যা নিয়ে এসেছি।

উপভোগ করুন! আই 6 6, ফায়ারফক্স, ক্রোম, সাফারি, অপেরাতে কাজ করে

ক্রস ব্রাউজারের কার্ট অবস্থানের কৌশল (উদাহরণ: কার্সারটিকে শেষের দিকে নিয়ে যাওয়া)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

মাংস এবং আলু মূলত @ কেডি 7 এর সেটকারেটপজিশন, সবচেয়ে বড় ঝাঁকুনি রয়েছে, if (el.selectionStart || el.selectionStart === 0)ফায়ারফক্সে নির্বাচন স্টার্ট 0 থেকে শুরু হচ্ছে , যা অবশ্যই বুলিয়ান পরিণত হচ্ছে, তাই এটি সেখানে ভেঙে যাচ্ছিল।

ক্রোমের মধ্যে সবচেয়ে বড় সমস্যাটি ছিল যে কেবল এটি দেওয়া .focus()যথেষ্ট ছিল না (এটি পাঠ্যের সমস্তটি নির্বাচন করে চলেছে!) সুতরাং, আমরা el.value = el.value;আমাদের ফাংশনটি বলার আগে নিজের মূল্যকে নিজের কাছে সেট করে দিয়েছি , এবং এখন এটির সাথে উপলব্ধি ও অবস্থান রয়েছে নির্বাচন স্টার্ট ব্যবহার করার জন্য ইনপুট ।

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Comments

@ এমসিপিডিএসআইএনএসএনএস যখন আমি একটি পাঠ্য ইনপুটটিতে ফোকাস দেওয়া হয় তখন আমি এই ফাংশনটি ব্যবহার করার চেষ্টা করছি, তবে আমি কোথাও পাচ্ছি না, আপনি দয়া করে খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে এই ফাংশনটি প্রয়োগ করতে সহায়তা করতে পারেন?

— elad.chen

@ elad.chen আপনি কি পাঠ্যবক্সের উপর ফোকাস করার সাথে সাথে এগুলি শেষ করার চেষ্টা করছেন?

— মার্ক পাইসাক - ট্রিলন.ও

@mcpDESIGNS এলিমেন্টটি ফোকাস করা মাত্রই আমি ক্ষেত্রের শুরুতে কার্সারটি রাখতে চাই। শিখরটি দেখুন: jsfiddle.net/KuLTU/3

— elad.chen

@ elad.chen ক্ষিপ্ত দেরী প্রতিক্রিয়া জন্য দুঃখিত! কেবলমাত্র সেই ইভেন্টটি আপনার অনুসন্ধান_ফিল্ড_ফোকাস ফাংশনের .onclickপরিবর্তে বদলে দিন.onfocus

— মার্ক পাইসেজাক - ট্রিলন.ও

el.value = el.value; [...] if(el !== null)- আমি এই দুটি লাইন পরিবর্তন করব। যদি elনাল হয় el.value = el.valueতবে ব্যর্থ হবে, সুতরাং সেই লাইনটি এর ভিতরে থাকা উচিত if।

— ব্যাকস্ল্যাশ

Answer 4

আমি কেডি 7 এর উত্তরটি কিছুটা সামঞ্জস্য করেছি কারণ সিলেকশনস্টার্টটি ঘটনাক্রমে 0 হলে ইলেম.সিলিউশন স্টার্টটি মিথ্যা হিসাবে মূল্যায়ন করবে।

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}

Answer 5

এই সমস্যাটি সমাধানের একটি সহজ উপায় আমি পেয়েছি, আইই এবং ক্রোমে পরীক্ষিত:

function setCaret(elemId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

এই ফাংশনে পাঠ্য বাক্স আইডি এবং ক্যারেটের অবস্থানটি পাস করুন।

Answer 6

আপনার যদি কিছু পাঠ্যবাক্সকে ফোকাস করার প্রয়োজন হয় এবং আপনার একমাত্র সমস্যাটি হ'ল পুরো পাঠটি হাইলাইট হয়ে যায় যেখানে আপনি চাইবেন কেরেটটি শেষের দিকে থাকে, তবে সেই নির্দিষ্ট ক্ষেত্রে আপনি ফোকাসের পরে পাঠ্যবাক্সের মানটি সেট করার এই কৌশলটি ব্যবহার করতে পারেন:

$("#myinputfield").focus().val($("#myinputfield").val());

Answer 7

<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
 setCaret(document.getElementById('input1'), 13, 13)
}

function setCaret(el, st, end)
{
 if (el.setSelectionRange)
 {
  el.focus();
  el.setSelectionRange(st, end);
 }
 else
 {
  if (el.createTextRange)
  {
   range = el.createTextRange();
   range.collapse(true);
   range.moveEnd('character', end);
   range.moveStart('character', st);
   range.select();
  }
 }
}
//]]>
</script>
</head>
<body>

<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>

<p>&nbsp;</p>

</body>
</html>

Answer 8

function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }

Comments

আনকড টাইপ এরির: অবজেক্ট [অবজেক্ট এইচটিএমএলপুটমেটমেন্ট] এর কোনও পদ্ধতি নেই 'শুরুর সাথে'

— ববপল

@ বোবপল: tIDউপাদানটির আইডি হওয়া উচিত, উপাদানটি নিজেই নয় itself যদি আপনি উপাদানটির অবজেক্টটি অতিক্রম করে থাকেন তবে আপনি এই পদ্ধতিতে কেবল দুটি প্রথম লাইন সরিয়ে ফেলতে পারেন, এবং এটি কার্যকর হবে।

— বিস্মিত

Answer 9

আমি নীচের মতো শর্তগুলি ঠিক করব:

function setCaretPosition(elemId, caretPos)
{
 var elem = document.getElementById(elemId);
 if (elem)
 {
  if (typeof elem.createTextRange != 'undefined')
  {
   var range = elem.createTextRange();
   range.move('character', caretPos);
   range.select();
  }
  else
  {
   if (typeof elem.selectionStart != 'undefined')
    elem.selectionStart = caretPos;
   elem.focus();
  }
 }
}