টেক্সট এরিয়ায় jQuery সেট কার্সার অবস্থান

Question

আপনি jQuery ব্যবহার করে কোনও পাঠ্য ক্ষেত্রে কার্সার অবস্থানটি কীভাবে সেট করবেন? আমি সামগ্রী সহ একটি পাঠ্য ক্ষেত্র পেয়েছি এবং আমি ব্যবহারকারীদের কার্সারটি ক্ষেত্রের দিকে ফোকাস করার সময় একটি নির্দিষ্ট অফসেটে অবস্থান করতে চাই। কোডটি এ জাতীয় দেখতে হবে:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

সেই সেটকার্সরপজিশন ফাংশনটির বাস্তবায়ন কেমন হবে? যদি আপনার abcdefg বিষয়বস্তু সহ একটি পাঠ্য ক্ষেত্র থাকে, তবে এই কলটির কার্সারটি নিম্নরূপে অবস্থিত হবে: abcd ** | ** efg।

জাভা একই ধরণের ফাংশন আছে, সেটক্রেটপজিশন। জাভাস্ক্রিপ্টের জন্য কি একই জাতীয় পদ্ধতি বিদ্যমান?

আপডেট: আমি সিএমএসের কোডটি jQuery এর সাথে কাজ করার জন্য নিম্নলিখিত পরিবর্তন করেছি:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

Comments

$(this).get(0).setSelectionRange)? আপনি কি জানেন যে এটি ঠিক একই this.setSelectionRange, কেবল ধীর এবং পড়া আরও শক্ত, তাই না? jQuery এখানে আপনার জন্য আক্ষরিক কিছুই করছে না।

— বোবিনস

@ ববিন্স মন্তব্যে যোগ করার জন্য, নির্বাচিত প্রতিটি উপাদানের জন্য ফাংশনটি পুনরাবৃত্তি করতে হবে এবং এটিকে ফিরিয়ে দেওয়া উচিত। সঠিক কোডটি আমার উত্তরে রয়েছে।

— এইচআরজে

@ ববিন্স বাস্তবেও বেশ সঠিক নয়। 'এটি' ডোম নোড নয়, তবে jQuery অবজেক্ট। সুতরাং, $ (এটি) .get (0) .setSelectionRange this.get (0) .setSelectionRange এর মত নয়, এটি.সেটসলেশনরেঞ্জের মতো নয়।

— Prestaul

this (এটি) [0] এরপরে দ্রুত $ (এটি) .গেট (0)

— এমিনিজ আর্টস

সম্পূর্ণ সমাধানের জন্য এই টিউটোরিয়ালটি দেখুন। webdesignpluscode.blogspot.com/2017/05/…

— ওয়াকাস আলী

Answer 1

আমার দুটি ফাংশন রয়েছে:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

তারপরে আপনি সেটকারেটটোপস এর মতো ব্যবহার করতে পারেন:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

JQuery থেকে ব্যবহার দেখানো একটি textareaএবং একটি উভয়ের সাথে সরাসরি উদাহরণ input:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});

<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

২০১ of সালের হিসাবে, পরীক্ষিত এবং ক্রোম, ফায়ারফক্স, আইই ১১, এমনকি আইই 8 তে কাজ করা (এটি এখানে শেষ দেখুন ; স্ট্যাক স্নিপেটগুলি আই 8 সমর্থন করে না)।

Comments

আপনি শেষটি সেট করতে এবং নির্বাচনের অফসেটগুলি শুরু করতে যাওয়ার কারণে কেন পতনের (সত্য) প্রয়োজনীয় হবে?

— অ্যালেক্সিস উইল্ক

@ ম্যারিওরাফ্ট: ক্রোম, ফায়ারফক্স, আইই 8 এবং আই 11 এ আমার জন্য textarea(এবং input) কাজ করে ।

— টিজে ক্রাউডার

আমার স্ক্রিপ্টটির সাথে এটি কাজ করতে সক্ষম হবে বলে মনে হয় না। আমার কাছে একটি পাঠ্য অঞ্চল রয়েছে যা পৃষ্ঠা লোডে খালি রয়েছে, তার পরে অ্যাপ্লিকেশনটি ব্যবহার করার সাথে সাথে জাভাস্ক্রিপ্ট দ্বারা পূর্ণ filled আমি প্রতিটি নতুন লেখার (ব্যবহারের একটি রেকর্ড) আগে ক্যারেটটি 0 এ ফিরে আসতে চাই। এটি কি ডায়নামিক ডেটা যা আমাকে সমস্যার কারণ করে? যদি তাই হয় আমি কিভাবে এটি কাছাকাছি পেতে পারি?

— ক্রিস

আক্ষরিক 'চরিত্র' এর স্ট্রিংটির তাত্পর্য কী? সেই নির্দিষ্ট স্ট্রিংটি ব্যবহার করা দরকার?

— জন স্নাইডার

Answer 2

এখানে একটি jQuery সমাধান:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

এই দিয়ে, আপনি করতে পারেন

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

• JsFiddle
• JsBin

Comments

@ জেসি: ডুনো কীভাবে ঘটেছিল, আমি সাধারণত ৪ ব্যবহার করি ed

— এমপেন

@ উবারনিট: আপনার পরামর্শের ভিত্তিতে আপডেট হয়েছে।

— এমপেন

@ এনভে: পরীক্ষার জন্য আমার কাছে আইপি 5.5 এর একটি অনুলিপি নেই, তবে সম্ভবত এটি হবে কারণ জিকুয়েরি আই 5.5 সমর্থন করে না ।

— এমপেন

@ জারোস্লাভজুড়ুবা: হ্যাঁ। এটাই. কিন্তু পারবেন আপনাকে না লিখতে হবে selectRange($('.my_input')[0], 3, 5)যদি আপনি ইতিমধ্যে jQuery ব্যবহার করছি। তদতিরিক্ত, এটি যে কোনও কারণেই প্রয়োজন হলে এটি একাধিক উপাদান নিয়ে কাজ করা উচিত। আপনি যদি খাঁটি নেটিভ চান তবে দয়া করে সিএমএসের সমাধানটি ব্যবহার করুন।

— এমপেন

$('#elem').focus()জ্বলজ্বলে কার্সারটি উপস্থিত হতে আমার আগেই যুক্ত করা দরকার ।

— মারিওরাফট

Answer 3

এখানে সমাধানগুলি jQuery এক্সটেনশন কোড ব্যতীত ঠিক।

এক্সটেনশন ফাংশনটি প্রতিটি নির্বাচিত উপাদানটির পুনরাবৃত্তি করে এবং thisচেইন সমর্থন করে ফিরে আসে। এখানে একটি সঠিক সংস্করণ:

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

Comments

প্রতিটি ফাংশন jquery অবজেক্ট প্রদান করে। যাতে আপনি আসলে এটি করতে পারেন: return this.each(function...)এবং স্ট্যান্ড্যালোন লাইনটি সরিয়ে দিন।

— ঝুম্মেল

Answer 4

আমি একটি সমাধান পেয়েছি যা আমার জন্য কার্যকর:

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    var input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

এখন আপনি কল করে যে কোনও উপাদানটির শেষের দিকে মনোনিবেশ করতে পারেন:

$(element).focusEnd();

অথবা আপনি অবস্থান নির্দিষ্ট করুন।

$(element).setCursorPosition(3); // This will focus on the third character.

Comments

টেক্সারিয়া উপাদানগুলির জন্য, ফোকাসএন্ডের একটি উন্নতি হ'ল সংযোজন this.scrollTop(this[0].scrollHeight);পয়েন্টটি দৃশ্যমান করার জন্য টেক্সারিয়াকে স্ক্রল করা হয়েছে তা নিশ্চিত করা।

— ড্র 16

Answer 5

এটি আমার জন্য ম্যাক ওএসএক্সের সাফারি 5, jQuery 1.4 এ কাজ করেছে:

$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;

Comments

আমার জন্য যা সরাসরি অ্যাক্সেসের সাথে কাজ করে না, তবে এটি পুরোপুরি কার্যকর হয়েছিল। my (মাইআইডি) .প্রপ ('সিলেকশন স্টার্ট', অবস্থান); my (মাইআইডি) .প্রপ ('নির্বাচন শেষ', অবস্থান);

— আমদান

Answer 6

আমি বুঝতে পারি যে এটি একটি খুব পুরানো পোস্ট, তবে আমি ভেবেছিলাম যে কেবল jQuery ব্যবহার করে এটি আপডেট করার জন্য আমার সম্ভবত একটি সহজ সমাধান দেওয়া উচিত।

function getTextCursorPosition(ele) {   
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"\n",secondSlice].join('');

    return new_text;
}

একটি নতুন লাইন যুক্ত করতে সিটিআরএল-এন্টার ব্যবহারের ব্যবহার (যেমন ফেসবুকে):

$('textarea').on('keypress',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));                

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

আমি সমালোচনার জন্য উন্মুক্ত। ধন্যবাদ.

আপডেট: এই সমাধানটি স্বাভাবিক অনুলিপি এবং পেস্ট কার্যকারিতাটি কাজ করার অনুমতি দেয় না (যেমন ctrl-c, ctrl-v), সুতরাং সেই অংশটি আবার কাজ করে তা নিশ্চিত করতে ভবিষ্যতে আমাকে এটি সম্পাদনা করতে হবে। কীভাবে এটি করবেন আপনার যদি ধারণা থাকে তবে দয়া করে এখানে মন্তব্য করুন এবং আমি এটি পরীক্ষা করে খুশি হব। ধন্যবাদ।

Answer 7

আইই তে কিছু অবস্থানে কার্সার সরানোর জন্য এই কোডটি যথেষ্ট:

var range = elt.createTextRange();
range.move('character', pos);
range.select();

Answer 8

আমি এটি ব্যবহার করছি: http://plugins.jquery.com/project/jCret

Answer 9

আপনি এভাবে টেক্সারিয়ায় পাঠ্য প্রবেশ করানোর আগে ফোকাস সেট করবেন?

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

Answer 10

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

$('#input').focus(function() {
    setTimeout( function() {
        document.getElementById('input').selectionStart = 4;
        document.getElementById('input').selectionEnd = 4;
    }, 1);
});

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

Comments

কেবলমাত্র পঠনযোগ্য বৈশিষ্ট্যগুলির

— অর্পণকে

Answer 11

আপনি যদি তীরচিহ্নগুলি ব্যবহার করেন যেহেতু ক্রম অন্যথায় অন্যদিকে ফ্রেম আপ করে Just

{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}

Comments

এটা সবচেয়ে ভাল অনুশীলন না return false;। event.preventDefault();পরিবর্তে আপনি চান । যদি আপনি মিথ্যা প্রত্যাবর্তন করেন তবে আপনি বোঝাচ্ছেন event.stopPropagation()যা সর্বদা কাম্য নয়

— অ্যালান এইচ।

Answer 12

এই প্রশ্নের উপর ভিত্তি করে , যখন টেক্সটরিয়ায় নতুন লাইন থাকবে তখন উত্তরটি অর্থ ও অপেরার জন্য পুরোপুরি কার্যকর হবে না। উত্তর কিভাবে setSelectionRange কল করার আগে selectionStart, selectionEnd সমন্বয় ব্যাখ্যা।

আমি @ এভিপ্রোগ্রামার প্রস্তাবিত সমাধানের সাথে অন্য প্রশ্ন থেকে অ্যাডজাস্ট অফসেট চেষ্টা করেছি এবং এটি কাজ করে।

function adjustOffset(el, offset) {
    /* From https://stackoverflow.com/a/8928945/611741 */
    var val = el.value, newOffset = offset;
    if (val.indexOf("\r\n") > -1) {
        var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

$.fn.setCursorPosition = function(position){
    /* From https://stackoverflow.com/a/7180862/611741 */
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    /* From https://stackoverflow.com/a/7180862/611741 
       modified to fit https://stackoverflow.com/a/8928945/611741 */
    if(this.lengh == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        selectionStart = adjustOffset(input, selectionStart);
        selectionEnd = adjustOffset(input, selectionEnd);
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    /* From https://stackoverflow.com/a/7180862/611741 */
    this.setCursorPosition(this.val().length);
}

Answer 13

কোডটি আমি বিটবাকেটে পেয়েছি ছোট পরিবর্তন

কোড এখন 2 পজিশন দিলে শুরু / শেষ পয়েন্ট সহ নির্বাচন / হাইলাইট করতে সক্ষম হয়। পরীক্ষিত এবং এফএফ / ক্রোম / আইই 9 / অপেরাতে সূক্ষ্মভাবে কাজ করে।

$('#field').caret(1, 9);

কোডটি নীচে তালিকাবদ্ধ করা হয়েছে, কেবল কয়েকটি লাইন পরিবর্তন হয়েছে:

(function($) {
  $.fn.caret = function(pos) {
    var target = this[0];
    if (arguments.length == 0) { //get
      if (target.selectionStart) { //DOM
        var pos = target.selectionStart;
        return pos > 0 ? pos : 0;
      }
      else if (target.createTextRange) { //IE
        target.focus();
        var range = document.selection.createRange();
        if (range == null)
            return '0';
        var re = target.createTextRange();
        var rc = re.duplicate();
        re.moveToBookmark(range.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
      }
      else return 0;
    }

    //set
    var pos_start = pos;
    var pos_end = pos;

    if (arguments.length > 1) {
        pos_end = arguments[1];
    }

    if (target.setSelectionRange) //DOM
      target.setSelectionRange(pos_start, pos_end);
    else if (target.createTextRange) { //IE
      var range = target.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos_end);
      range.moveStart('character', pos_start);
      range.select();
    }
  }
})(jQuery)

Comments

ক্রোম 39, আইই 11, সাফারি 5.1.7 এ চলছে তবে ফায়ারফক্স 34 এ নেই: jsfiddle.net/0t94z82k/6

— jbobbins

Answer 14

সন্তোষজনক উপাদান এবং jQuery জন্য আমাকে এই কাজটি পেতে হয়েছিল এবং চেষ্টা করেছিল যে কেউ এটি ব্যবহারের জন্য প্রস্তুত হতে পারে:

$.fn.getCaret = function(n) {
    var d = $(this)[0];
    var s, r;
    r = document.createRange();
    r.selectNodeContents(d);
    s = window.getSelection();
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return s.anchorOffset;
};

$.fn.setCaret = function(n) {
    var d = $(this)[0];
    d.focus();
    var r = document.createRange();
    var s = window.getSelection();
    r.setStart(d.childNodes[0], n);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return this;
};

ব্যবহারটি $(selector).getCaret()অফসেট নম্বরটি দেয় এবং অফসেটটি $(selector).setCaret(num)প্রতিষ্ঠিত করে এবং উপাদানটিতে ফোকাস সেট করে।

এছাড়াও একটি ছোট্ট টিপ, আপনি যদি $(selector).setCaret(num)কনসোল থেকে চালান তবে এটি কনসোল.লগটি ফিরিয়ে দেবে তবে কনসোল উইন্ডোতে এটি প্রতিষ্ঠিত হওয়ার কারণে আপনি ফোকাসটি কল্পনা করতে পারবেন না।

বেষ্টস; ডি

Answer 15

যদি সেটলেশনরেঞ্জ উপস্থিত না থাকে তবে আপনি সরাসরি প্রোটোটাইপ পরিবর্তন করতে পারেন।

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', end);
                this.moveStart('character', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

jsFizz লিঙ্ক