JQuery সাফারি এবং ক্রোমে কাজ করছে না ব্যবহার করে ফোকাসে পাঠ্য নির্বাচন করা

Question 1

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

$("#souper_fancy").focus(function() { $(this).select() });

Question 2

এটি অন-মাউসআপ ইভেন্ট যা নির্বাচনটি বাছাইয়ের কারণ হিসাবে নিয়েছে, তাই আপনাকে কেবল যুক্ত করতে হবে:

$("#souper_fancy").mouseup(function(e){
    e.preventDefault();
});

Question 3

$('#randomfield').focus(function(event) {
    setTimeout(function() {$('#randomfield').select();}, 0);
});

Question 4

এটি ইনপুট টাইপ = "পাঠ্য" উপাদানগুলির জন্য সূক্ষ্ম কাজ করে। # স্যুপার_ফ্যান্সি কোন ধরণের উপাদান?

$("#souper_fancy").focus(function() {
    $(this).select();
});

Question 5

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

এটি এড়াতে এবং পাঠ্য নির্বাচনের পুনরায় কাজ করার জন্য, আপনি ফোকাসে একটি পতাকা সেট করতে পারেন, এটি মাউসআপ থেকে পড়তে পারেন এবং পুনরায় সেট করতে পারেন যাতে ভবিষ্যতে মাউসআপ ইভেন্টগুলি প্রত্যাশার মতো কাজ করবে।

$("#souper_fancy").focus(function() {
    $(this).select();

    //set flag for preventing MOUSEUP event....
    $this.data("preventMouseUp", true);
});

$("#souper_fancy").mouseup(function(e) {
    var preventEvent = $this.data("preventMouseUp");

    //only prevent default if the flag is TRUE
    if (preventEvent) {
        e.preventDefault();
    }

    //reset flag so MOUSEUP event deselect the text
    $this.data("preventMouseUp", false);
});

Question 6

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

আমি এই স্ট্যাক পোস্টে আরও ভাল ফিক্স পেয়েছি যার মধ্যে সমস্যা নেই এবং সমস্ত ব্রাউজারে কাজ করে।

Question 7

এটি ক্রোমেও কাজ করা উচিত:

$("#souper_fancy").focus(function() {
    var tempSouper = $(this);
    setTimeout(function(){
        tempSouper.select();
    },100);
});

Question 8

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

    function selectAllOnFocus(e) {
    if (e.type == "mouseup") { // Prevent default and detach the handler
        console.debug("Mouse is up. Preventing default.");
        e.preventDefault();
        $(e.target).off('mouseup', selectAllOnFocus);
        return;
    }
    $(e.target).select();
    console.debug("Selecting all text");
    $(e.target).on('mouseup', selectAllOnFocus);
}

তারপরে প্রথম ইভেন্টটি তারে দিন

    $('.varquantity').on('focus', selectAllOnFocus);

Question 9

setSelectionRange()কলব্যাকের অভ্যন্তরে এতে ব্যবহার করুন requestAnimationFrame():

$(document).on('focus', '._selectTextOnFocus', (e) => {
    var input = e.currentTarget;
    var initialType = e.currentTarget.type;

    requestAnimationFrame(() => {
        // input.select() is not supported on iOS
        // If setSelectionRange is use on a number input in Chrome it throws an exception,
        // so here we switch to type text first.
        input.type = "text";
        input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999);
        input.type = initialType;
    });
});

যেহেতু মোবাইল সাফারি তে কাজ করে না তার setSelectionRange()পরিবর্তে ব্যবহার করুন (আইওআর ডিভাইসগুলিতে একটি প্রোগ্রাম ইনপুট ক্ষেত্রে পাঠ্য নির্বাচন করা দেখুন (মোবাইল সাফারি) )।select()select()

requestAnimationFrameপাঠ্যটি নির্বাচনের আগে ব্যবহার করা অপেক্ষা করা প্রয়োজন , অন্যথায় আইওএস এ কীবোর্ডটি আসার পরে উপাদানটি সঠিকভাবে স্ক্রোল করা হয়নি।

setSelectionRange()এটি ব্যবহার করার সময় এটিতে ইনপুট প্রকারটি সেট করা গুরুত্বপূর্ণ text, অন্যথায় এটি ক্রোমে ব্যতিক্রম ছুঁড়ে ফেলতে পারে ( নির্বাচন স্টার্ট / নির্বাচন দেখুন এবং ইনপুট টাইপ = "সংখ্যা" -এ Chrome এ আর অনুমতি নেই )।

Question 10

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

<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">

(সেটটাইমআউট ব্যতীত) এটি সাফারি, মোবাইল সাফারি এবং এমএস এজ এ কাজ করে না)