পাঠ্য ইনপুট উপাদানটিতে পাঠ্যের শেষে কার্সার রাখতে জাভাস্ক্রিপ্ট ব্যবহার করুন


308

উপাদানটিকে ফোকাস করার পরে - জাভাস্ক্রিপ্টের মাধ্যমে কোনও ইনপুট পাঠ্য উপাদানের পাঠ্যের শেষে কার্সারটি রাখার সর্বোত্তম উপায় (এবং আমি সহজতম উপায় অনুমান করি) কি?

উত্তর:


170

আইই তে আমি এই একই সমস্যার (আরজেএস / প্রোটোটাইপের মাধ্যমে ফোকাস সেট করার পরে) মুখোমুখি হয়েছি। যখন ক্ষেত্রটির জন্য ইতিমধ্যে কোনও মান রয়েছে তখন ফায়ারফক্স ইতিমধ্যে কার্সারটি ছাড়ছিল। আইই পাঠ্যের শুরুতে কার্সারকে জোর করছিল।

সমাধানটি আমি পৌঁছেছি নীচে:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

এটি আই 7 এবং এফএফ 3 উভয় ক্ষেত্রেই কাজ করে


3
এটা পাঠের জন্য কী হবে?
তারেক

19
ক্রোমে এখন কাজ করে (9.0.597.98)
ম্যাট

6
এটি এখন আই 9 তে কাজ করে না - কার্সারটি ক্ষেত্রের শুরুতে লাফ দেয়।
টাউন

6
এফএফ-তেও কাজ করে না 8 চেনোসরাস থেকে সমাধানটি কাজ করে বলে মনে হচ্ছে।
সাইমন

3
ক্রোম 24.0.1312.57, IE 9.0.8112 এ আমার জন্য কাজ করেছে, তবে ফায়ারফক্স 18.0.2 নয়
ক্রিস - হ্যাডডাক্স টেকনোলজিস

190

বেশিরভাগ ব্রাউজারে এটি কাজ করার একটি সহজ উপায় রয়েছে ।

this.selectionStart = this.selectionEnd = this.value.length;

যাইহোক, কয়েকটি ব্রাউজারের * কীর্তির কারণে, আরও অন্তর্ভুক্তিযুক্ত উত্তরটি দেখতে আরও ভাল লাগে

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

JQuery ব্যবহার (শ্রোতা সেট করতে, তবে এটি অন্যথায় প্রয়োজন হয় না)

ভ্যানিলা জেএস ব্যবহার করে ( এই উত্তর থেকে function গ্রহণের addEventকার্য )


quirks

ক্রোমের একটি অদ্ভুত কৌতুক রয়েছে যেখানে কার্সার ক্ষেত্রের দিকে সরানোর আগে ফোকাস ইভেন্টটি আগুন দেয়; যা আমার সহজ সমাধানটিকে স্ক্রু করে দেয়। এটি ঠিক করার জন্য দুটি বিকল্প:

  1. আপনি 0 এমএসের একটি টাইমআউট যুক্ত করতে পারেন ( স্ট্যাকটি পরিষ্কার না হওয়া পর্যন্ত অপারেশনটি পিছিয়ে দিতে )
  2. আপনি থেকে ইভেন্ট পরিবর্তন করতে পারেন focusথেকে mouseup। আপনি যদি এখনও ফোকাসের ট্র্যাক না রাখেন তবে এটি ব্যবহারকারীর পক্ষে বেশ বিরক্তিকর হবে। আমি এই বিকল্পগুলির কোনওটির সাথেই সত্যিই প্রেমে আছি না।

এছাড়াও, @ ভ্লাদক্রাস উল্লেখ করেছেন যে অপেরা-র কিছু পুরানো সংস্করণ ফাঁকা থাকলে সঠিকভাবে দৈর্ঘ্যটি গণনা করে। এর জন্য আপনি একটি বিশাল সংখ্যা ব্যবহার করতে পারেন যা আপনার স্ট্রিংয়ের চেয়ে বড় হওয়া উচিত।


2
ক্রোম 24.0.1312.57, আইই 9.0.8112 এবং ফায়ারফক্স 18.0.2
ক্রিস - হ্যাডডাক্স টেকনোলজিস

4
এটি একটি পর্যবেক্ষণের (ক্লডজ) পরিবর্তে একটি ভাল সমাধান, কম কোড, এবং এখানে বিকল্পগুলির বিকল্পগুলির পরে আরও বোধগম্য। ধন্যবাদ।
ডেরেক লিটজ

আমি এটি কেবল প্রথম ফোকাস ইভেন্টের জন্য করব এবং এখনই এটি কল করব। অন্যথায়, আপনি যতবার ক্ষেত্রটিতে ক্লিক করবেন, কার্সারটি শেষ দিকে সরানো হবে।
ড্যামিয়েন

this.selectionStart = this.selectionEnd = 0; এটি ইনপুট বাক্সের প্রথম অক্ষরের আগে ফোকাস সরিয়ে নেওয়া উচিত। তবে পরিবর্তে, যখন আমি ডিবাগ করি তখন এটি নির্বাচন ও মান নির্বাচনও শুরু করে না! এবং এটি প্রথম চরিত্রে সরানো না !!
সোহম

1
অপেরা সঙ্গে ভুল কখনও কখনও কাজ করতে রিপোর্ট beening ছিল selectionStartএবং lengthস্পেস উপর ছোট সংখ্যা ফিরিয়ে আনে। এজন্য আমি 10000বা এর পরিবর্তে অন্য কোনও বড় সংখ্যা ব্যবহার করি this.value.length(আইই 8 এবং
আই 11 এ

160

এটি চেষ্টা করুন, এটি আমার পক্ষে কাজ করেছে:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

কার্সারটি শেষের দিকে চলে যাওয়ার জন্য, ইনপুটটির প্রথমে ফোকাস করতে হবে, তারপরে মানটি পরিবর্তন করা গেলে এটি শেষের দিকে চলে যাবে। যদি আপনি একই মান নির্ধারণ করেন তবে এটি ক্রোমে পরিবর্তিত হবে না।


2
এটি অনফোকাসের মতো = "this.value = this.value;
তারেক

15
মান সেট করার আগে ফোকাস সেট করা এটি ক্রোমে কাজ করার মূল চাবিকাঠি।
অ্যানাটোলি টেকটোনিক

7
this.2, 3, এবং 4 লাইনে ইনপুটটির সামনে রাখবেন কেন ? আমরা ইতিমধ্যে জানি যে inputএটি ইনপুট উপাদান। ব্যবহার thisঅপ্রয়োজনীয় বলে মনে হচ্ছে। অন্যথায় ভাল সমাধান!
The 111

3
@ তারেক তারা এক নয়। এই কৌশলটি গৃহীত উত্তরের চেয়ে অনেক ভাল।
লুইস

4
আরও সহজ:$input.focus().val($input.val());
দুধভস্কি

99

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

scrollTopআমরা উল্লম্ব-স্ক্রোলযোগ্য অবস্থায় আছি এমন ক্ষেত্রে আমি একটি উচ্চ মানেরও সেট করছি textarea। (একটি স্বেচ্ছাসেবী উচ্চ মান ব্যবহার $(this).height()করা ফায়ারফক্স এবং Chrome এর চেয়ে বেশি নির্ভরযোগ্য বলে মনে হয় )

আমি এটি একটি jQuery প্লাগইন হিসাবে তৈরি করেছি। (আপনি যদি jQuery ব্যবহার না করেন তবে আমি বিশ্বাস করি আপনি এখনও খুব সহজেই টুকরোটি পেতে পারেন))

আমি আই 6, আই 7, আই 8, ফায়ারফক্স 3.5.5, গুগল ক্রোম 3.0, সাফারি 4.0.4, অপেরা 10.00 এ পরীক্ষা করেছি।

এটি jquery.com এ PutCursorAtEnd প্লাগইন হিসাবে উপলব্ধ । আপনার সুবিধার জন্য, মুক্তির কোড ১.০ নিম্নরূপ:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);

4
কেন দৈর্ঘ্য গণনা? আপনি যদি যাইহোক এটির ওভারশুট করতে যাচ্ছেন তবে কেন কেবল এই.সেটসলেশনরেঞ্জ (9999,9999) নয়?
PRMan

21
<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

এই ফাংশনটি আইই 9, ফায়ারফক্স 6.x এবং অপেরা 11.x এ আমার জন্য কাজ করে


দুর্দান্ত, প্রথম প্রস্তুত সমাধান যা এফএফ 6 এবং আইই 8 উভয়ের জন্যই কাজ করে বলে মনে হচ্ছে।
সাইমন

3
কোনও কারণে জনপ্রিয় উত্তরটি আমার পক্ষে কার্যকর হয়নি। এটি নিখুঁতভাবে কাজ করেছে।
মেট্রিক 152

আইই 9 এ আমার জন্য কাজ করে না। ত্রুটি:SCRIPT16389: Unspecified error.
সোহম

1
মুক্তিযোদ্ধা 46, ক্রোম 51, এবং আইই 11 এর মধ্যে পুরোপুরি কাজ করে
webdevguy

এটি আই 8 তে কাজ করে যখন অন্য কিছু বিকল্প দেয় নি। ধন্যবাদ.
বেনম্যাডডক্স

17

আমি ক্রোমে বেশ দুর্দান্ত সাফল্য সহ নিম্নলিখিতটি চেষ্টা করেছি

$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});

দ্রুত রুনডাউন:

এটি প্রতিটি ইনপুট ক্ষেত্রকে এতে ক্লাস ফোকাসের সাথে নেয়, তারপরে ইনপুট ক্ষেত্রের পুরানো মানটি একটি ভেরিয়েবলের মধ্যে সঞ্চয় করে, এরপরে এটি খালি স্ট্রিংটি ইনপুট ক্ষেত্রে প্রয়োগ করে।

তারপরে এটি 1 মিলি সেকেন্ড অপেক্ষা করে এবং আবার পুরানো মানটি রাখে।


পারফেক্ট! অন্য সমস্ত সমাধান আমার পক্ষে কাজ করে না, কেবল আপনার সমাধান আমার পক্ষে কাজ করে। হতে পারে কারণ আমি টেক্সারিয়ায় মান নির্ধারণ করতে পিএইচপি ব্যবহার করছি এবং জেএস মানটি সনাক্ত করতে পারে না তাই জেএসকে অবশ্যই 1 মিলিসেকেন্ড অপেক্ষা করতে হবে।
zac1987

3
@ zac1987 সম্ভবত পিএইচপি এইচটিএমএল রেন্ডার করবে না, এইচটিএমএল ক্লায়েন্টের কাছে লোড হবে এবং তারপরে জেএস চালানো হবে। সম্ভাবনা হ'ল আপনি কোনও দস্তাবেজ প্রস্তুত ইভেন্টের জন্য অপেক্ষা করছেন না।
পুনরায় সংযোগ করুন

কেবল উল্লেখ করতে যে সেটটিটাইমআউট এর মতো ব্যবহার করা অনির্দেশ্য ফলাফলের কারণ হতে পারে। কোডটি কিছু পরিস্থিতিতে সঠিকভাবে আচরণ করতে পারে যেমন কখনও কখনও 1 মিমের সময় কিছুটা ইনপুট পরিবর্তন করতে পারে যে ভালটি আর সেট হবে না। এছাড়াও এটি লক্ষণীয় গুরুত্বপূর্ণ যে 1 মিমি সেকেন্ড সর্বনিম্ন অপেক্ষার সময়। সুতরাং আপনার যদি কিছু সিপিইউ বাউন্ড পদ্ধতি থাকে তবে ফোকাসটি 1 এমএসেরও বেশি অপেক্ষা করতে পারে। এটি ইউআইকে প্রতিক্রিয়াহীন করে তুলবে। এবং এটি প্রয়োজনীয় হওয়া উচিত নয় কারণ .val () পদ্ধতিটি যাইহোক UI পরিবর্তনগুলিকে ট্রিগার করতে পারে।
Loïc Faure-Lacroix

10

এটি ২০১২ এবং উপরের কোনও পদ্ধতিই আমার পক্ষে কাজ করে নি, তবে https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/ থেকে নেওয়া এই একটি করেছে

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}
<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>


1
ধন্যবাদ @MaxAlexanderHanna, আমি শুধুমাত্র ছিল el.focus()মধ্যে else ifতাই এটি কিছু কিছু ক্ষেত্রে কাজ করছিল না। আমি এখন এটি ক্রোম এবং (কাঁপুনি) আইই
অ্যান্ডি রাদ্দাতজ

পরীক্ষিত এবং 7/12/2019 হিসাবে IE এবং CHROME উভয় ক্ষেত্রেই কাজ করে। আপনাকে ধন্যবাদ, upvated।
সর্বাধিক আলেকজান্ডার হান্না

কল্পনাপ্রসূত, এটি কাতালিনা বিটাতে সাফারিতে কাজ করে।
নেটওপ্রেটর উইব্বি

8

সহজ। মানগুলি সম্পাদনা বা পরিবর্তন করার সময় প্রথমে ফোকাস রাখুন তারপরে মান নির্ধারণ করুন।

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

পুরাতন মান এখনও 2016. Chrome এবং মুক্তিযোদ্ধা এখানে কাজ করে
Volomike

1
নিখুঁত উত্তর.
পার্থ পল

7

তবুও মধ্যবর্তী পরিবর্তনশীলটি দরকার, (ভ্যার ভ্যাল = দেখুন) অন্যথায় কার্সারটি অদ্ভুত আচরণ করে, আমাদের শেষে এটি দরকার need

<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>

6

el.setSelectionRange(-1, -1);

https://codesandbox.io/s/peaceful-bash-x2mti

এই পদ্ধতিটি একটি কলটিতে এইচটিএমএলপুট.এলিমেশন.স্লেশনস্টার্ট, নির্বাচনআপনি এবং নির্বাচননির্দেশের বৈশিষ্ট্যগুলি আপডেট করে।

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

অন্যান্য জেএস পদ্ধতিতে -1সাধারণত শেষ চরিত্রের অর্থ হয়। এটির ক্ষেত্রেও এটি, তবে ডক্সে আমি এই আচরণের স্পষ্ট উল্লেখ খুঁজে পাইনি।


এটি আমার পক্ষে সবচেয়ে কার্যকর এবং এটি সবচেয়ে সহজ the +1
ক্রিস ফার

আমাকে অনফোকাস = "this.value = this.value;" অন্তর্ভুক্ত করতে হয়েছিল; মাইক বেরোর উত্তর থেকে
ক্রিস ফার

5

সমস্ত ক্ষেত্রে সমস্ত ব্রাউজারের জন্য:

function moveCursorToEnd(el) {
    window.setTimeout(function () {
            if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }, 1);
}

অনফোকাস ইভেন্ট হ্যান্ডলার থেকে কার্সারটি সরানোর প্রয়োজন হলে টাইমআউট দরকার


নোট করুন যে এটি অ্যান্ড্রয়েডে সমস্যার সৃষ্টি করে, যদিও সীমার নির্বাচনটি কীবোর্ড বাফারে ডেটা রাখে যার অর্থ আপনার টাইপ করা কোনও কী ইনপুটটিতে পাঠ্যটিকে নকল করে দেবে, যা সবচেয়ে বেশি কার্যকর নয়।
মাইক 'পোম্যাক্স' কামারম্যানস

1
এটি আমার জন্য আশ্চর্যজনক এবং দুর্দান্ত কাজ করেছে! আমার কাছে একগুচ্ছ ইনপুট রয়েছে যাগুলির জন্য একটি স্ক্রোললিফ্ট দরকার এবং এটিতে বিচিত্র জিনিসগুলি হয় ie সুতরাং আমি এমন কিছু সন্ধান করছিলাম যা আমি কোনও শিমের জন্য ব্যবহার করতে পারি এবং এটিই ছিল। এটি অন্যান্য ব্রাউজারগুলিতে কাজ করে না, তবে এর জন্য যেখানে কিছুই কাজ করে না এটি আশ্চর্যজনক!
zazvorniki

5

আমি গৃহীত উত্তরটি অনেক পছন্দ করি তবে এটি ক্রোমে কাজ করা বন্ধ করে দেয়। ক্রোমে, কার্সারটি শেষ হওয়ার জন্য, ইনপুট মানটি পরিবর্তন করা দরকার। সমাধানটি নিম্নরূপ:

<input id="search" type="text" value="mycurrtext" size="30" 
   onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>

1
এটি সমাধান এখন যা আমার পক্ষে ক্রোমে প্রকৃতপক্ষে কাজ করে। বাক্য গঠনটি অদ্ভুত তবে ওহে, আপাতত এই সমাধানটি নিয়ে বাঁচতে শিখবে!
স্যাম বেলরোজ 18

3

JQuery এ, এটি

$(document).ready(function () {
  $('input').focus(function () {
    $(this).attr('value',$(this).attr('value'));
  }
}

2
এই ফাংশনটি কেবলমাত্র যখন $ ('ইনপুট') ফোকাস পায় তখন মানটিকে মানটির মান নির্ধারণ করে। এটি কার্সারটিকে লাইনের শেষ দিকে প্রেরণ করবে না।
vrish88

3

এই সমস্যাটি আকর্ষণীয়। এটি সম্পর্কে সবচেয়ে বিভ্রান্তিকর বিষয় হ'ল যে সমাধানটি আমি খুঁজে পেলাম না সমস্যার সম্পূর্ণ সমাধান হয়েছে solved

++++++++ সমাধান +++++++

  1. আপনার যেমন জেএস ফাংশন প্রয়োজন:

    function moveCursorToEnd(obj) {
    
      if (!(obj.updating)) {
        obj.updating = true;
        var oldValue = obj.value;
        obj.value = '';
        setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
      }
    
    }
  2. অনফোকাস এবং অন্লিক ইভেন্টগুলিতে আপনাকে এই লোকটিকে কল করতে হবে।

    <input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">

এটি সমস্ত ব্রাউজারকে ডিভাইসগুলিতে কাজ করে !!!!


2

আমি সবেমাত্র পেয়েছি যে আইওএস-এ, textarea.textContentসম্পত্তি সেট করার মাধ্যমে প্রতিবার পাঠ্য উপাদানটিতে পাঠ্যের শেষে কার্সার রাখা হবে। আচরণটি আমার অ্যাপ্লিকেশনটিতে একটি বাগ ছিল, তবে মনে হয় আপনি ইচ্ছাকৃতভাবে ব্যবহার করতে পারেন।


2
var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);

এই সমাধানটি বিদ্যমান জিকুয়েরির সমাধানের চেয়ে আরও ভাল কী করে?
রোভানিয়ন

এটি অন্য একটি সমাধান। আপনার যদি এইচটিএমএল ফাইলগুলি এবং কেবল জাভাস্ক্রিপ্টের পুনঃনির্মাণের অনুমতি না থাকে তবে এই সমাধানটি আরও ভাল;) আমারও একই অবস্থা ছিল!
হানক্রুম

এই সমাধানটি আমার জন্য কাজ করেছে অন্যান্য jQuery সমাধান সম্ভবত এটি ফোকাস করার আগে আপনি ইনপুট মান খালি করার সাথে সম্পর্কিত নয়।
talsibony

2

কিছু উত্তর নিচ্ছি .. একটি একক লাইন jquery করা।

$('#search').focus().val($('#search').val());

1

যদি ইনপুট ক্ষেত্রে কেবল একটি স্থিতিশীল ডিফল্ট মান প্রয়োজন হয় আমি সাধারণত jQuery দিয়ে এটি করি:

$('#input').focus().val('Default value');

এটি সমস্ত ব্রাউজারে কাজ করে বলে মনে হচ্ছে।


1

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

ক্রস ব্রাউজার এবং সমস্ত ইনপুট প্রকারের জন্য যে সমাধানটি কাজ করে তা বরং সহজ:

  • একটি চলক ইনপুট এর মান পেতে এবং সংরক্ষণ করুন
  • ইনপুট ফোকাস
  • সঞ্চিত মানটিতে ইনপুটটির মান সেট করুন

এইভাবে কার্সারটি ইনপুট উপাদানটির শেষে রয়েছে।
সুতরাং আপনি যা কিছু করতে চান তা হ'ল (জ্যুচুরি ব্যবহার করে, যে উপাদান নির্বাচনকারীকে ফোকাস করতে ইচ্ছুক সেগুলি ক্লিক করা উপাদানটির 'ডেটা-ফোকাস-এলিমেন্ট' ডেটা অ্যাট্রিবিউটের মাধ্যমে অ্যাক্সেসযোগ্য এবং ফাংশন '.foo' এ ক্লিক করার পরে কার্যকর হয়) উপাদান):

$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});

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


1

ভ্যানিলা জাভাস্ক্রিপ্ট নিয়ে এটি কাজ করে দেখুন।

<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">

জে

document.getElementById("yourId").focus()

0

পাঠ্যের শেষে পাঠ্য অঞ্চলে ক্লিক করার সময় কার্সার সেট করুন ... এই কোডের বিভিন্নতা হয় ... ALSO কাজ করে! ফায়ারফক্স, আইই, সাফারি, ক্রোম ..

সার্ভার-সাইড কোডে:

txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")

জাভাস্ক্রিপ্টে:

function sendCursorToEnd(obj) {
    var value =  $(obj).val(); //store the value of the element
    var message = "";
    if (value != "") {
        message = value + "\n";
     };
    $(obj).focus().val(message);
    $(obj).unbind();
 }

0

আপনি যদি প্রথমে মানটি সেট করেন এবং তারপরে ফোকাস সেট করেন তবে কার্সার সর্বদা শেষে উপস্থিত হবে।

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

Https://jsfiddle.net/5on50caf/1/ পরীক্ষা করার জন্য ফিডলটি এখানে


0

আমি একটি " ডিভ " উপাদানটির শেষে কার্সার রাখতে চেয়েছিলাম যেখানে কনটেনটেটেবল = সত্য, এবং আমি জিয়নক্রস কোড সহ একটি সমাধান পেয়েছি :

<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

এবং এই ফাংশনটি যাদু করে:

 function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

বেশিরভাগ ব্রাউজারগুলির জন্য সূক্ষ্মভাবে কাজ করে, দয়া করে এটি পরীক্ষা করে দেখুন, এই কোডটি পাঠ্যটিকে ডিভ এলিমেন্টে রাখে এবং ফোকাসটি রাখবে (ইনপুট উপাদান নয়)

https://jsfiddle.net/Xeoncross/4tUDk/

ধন্যবাদ, জিয়নক্রস


0

আমিও একই সমস্যার মুখোমুখি হয়েছি। শেষ পর্যন্ত এই আমার জন্য কাজ করবে:

jQuery.fn.putCursorAtEnd =  = function() {

  return this.each(function() {

    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;

      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);

    } else {

      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};

এইভাবেই আমরা এটি কল করতে পারি:

var searchInput = $("#searchInputOrTextarea");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

এটি আমার জন্য সাফারি, আইই, ক্রোম, মজিলায় কাজ করে। মোবাইল ডিভাইসে আমি এটি চেষ্টা করিনি।


0

এই সমাধানটি পরীক্ষা করে দেখুন!

//fn setCurPosition
$.fn.setCurPosition = function(pos) {
    this.focus();
    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;
};

// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);

// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>


0

সুপার ইজি (আপনাকে ইনপুট উপাদানটিতে ফোকাস করতে হতে পারে)

inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;

-1

আমি প্রস্তাবগুলি আগে চেষ্টা করেছিলাম কিন্তু কেউই আমার পক্ষে কাজ করেনি (সেগুলি ক্রোমে পরীক্ষা করা হয়েছে), তাই আমি নিজের কোডটি লিখেছিলাম - এবং এটি ফায়ারফক্স, আইই, সাফারি, ক্রোমে দুর্দান্ত কাজ করে ...

টেক্সারিয়াতে:

onfocus() = sendCursorToEnd(this);

জাভাস্ক্রিপ্টে:

function sendCursorToEnd(obj) { 
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
    message = value + "\n";
};
$(obj).focus().val(message);}

-1

আমার উত্তরের একটি জেএসফিডাল ডেমো এখানে । ডেমোটি কফিস্ক্রিপ্ট ব্যবহার করে তবে আপনার প্রয়োজন হলে আপনি এটি সরল জাভাস্ক্রিপ্টে রূপান্তর করতে পারেন ।

জাভাস্ক্রিপ্টে গুরুত্বপূর্ণ অংশ:

var endIndex = textField.value.length;
if (textField.setSelectionRange) {
   textField.setSelectionRange(endIndex, endIndex);
}

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

এখানে জেএসফিডাল থেকে কোড দেওয়া হয়েছে, সুতরাং এই উত্তরটি jsFiddle অদৃশ্য হয়ে গেলেও সংরক্ষণ করা হবে:

moveCursorToEnd = (textField) ->
  endIndex = textField.value.length
  if textField.setSelectionRange
    textField.setSelectionRange(endIndex, endIndex)

jQuery ->
  $('.that-field').on 'click', ->
    moveCursorToEnd(this)
<div class="field">
    <label for="pressure">Blood pressure</label>:
    <input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
    Try clicking in the text field. The cursor will always jump to the end.
</p>
body {
    margin: 1em;
}

.field {
    margin-bottom: 1em;
}

-1

নিম্নলিখিত কোড ব্যবহার করে দেখুন:

$('input').focus(function () {
    $(this).val($(this).val());
}).focus()

1
ওপেল তাদের ইচ্ছার ইঙ্গিত দেয় এমন একটি পার্শ্ব প্রতিক্রিয়া অনুসরণ করে হোয়াইট স্পেস যুক্ত করা কি?
চার্লস ডাফি

তবে কেন আমার উত্তর -২ পাবে? আমি এটা পেতে না! এটি
উদাহরণস্বরূপ

এখন আপনি অনির্দিষ্ট পার্শ্ব প্রতিক্রিয়াটি স্থির করেছেন, এটি কম স্পষ্টতই ভুল (অনাকাঙ্ক্ষিত আচরণের দিক থেকে), তবে আমি বুঝতে পারি যে কেন এই বিন্দুটির আগে এটি নিম্নচোটিত হত। এই মুহুর্তে, যে কারণে আমি উত্সাহ না দিচ্ছি তা সম্ভাব্য দুর্বল কর্মক্ষমতা - আনবাউন্ডেড দৈর্ঘ্যের একটি মান পড়া এবং লেখা ধীর হওয়ার সম্ভাবনা রয়েছে; setSelectionRangeপদ্ধতির অবশ্যই অনেক বেশি দক্ষ যখন / যেখানে সমর্থিত।
চার্লস ডাফি

1
(ভাল - এটি, এবং আমি নিশ্চিত নই যে এটি বিদ্যমান উত্তরের সাথে কী যুক্ত করে যা পূর্ববর্তীকরণের মানটি পুনরায় সেট করার মাধ্যমেও কাজ করেছিল; যদি এটি কোনও নতুন / গুরুত্বপূর্ণ কিছু যোগ করে তবে কেবল কোডের পরিবর্তে এটি কী তা বর্ণনা করে কিছু পাঠ্য যুক্ত করে , দুই মেয়ে).
চার্লস ডাফি

অবশ্যই - এবং ওপি প্রশ্নটিতে ইঙ্গিত দিয়েছে যে তারা একটি জায়গা চায়? যদি তা না হয় তবে এটি নির্দিষ্টকরণের অংশ নয়; সুতরাং, "অনির্ধারিত"।
চার্লস ডাফি

-1

যদিও আমি খুব দেরিতে উত্তর দিচ্ছি, তবে ভবিষ্যতের প্রশ্নের জন্য, এটি সহায়ক হবে। এবং এটি কাজ করেcontenteditable ডিভিতেও ।

যেখান থেকে আপনার শেষ দিকে ফোকাস সেট করা প্রয়োজন; এই কোড লিখুন-

var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);

এবং ফাংশনটি হ'ল -

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();
    }
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.