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


85

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

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

আমি আইপ্যাড / আইফোনের সাফারিতে সঠিক আচরণ চাই। এটি আইপড / আইফোন ব্রাউজারগুলিতে কাজ করছে না। কোন সুত্র. গৃহীত উত্তরের নীচে কেবল ডেস্কটপ ভিত্তিক ক্রোম / সাফারি for
আনন্দ

4
দ্রষ্টব্য: এখানে গৃহীত উত্তরটি কেবলমাত্র অর্ধেক সমস্যার সমাধান করে। এটি নির্বাচিত কাজ করে তোলে, তবে পরবর্তী ক্লিকগুলির সাথে এটি নির্বাচন না করে তা কঠিন করে তোলে। আরও ভাল সমাধান এখানে পাওয়া যাবে: stackoverflow.com/questions/3380458/…
এসডিসি

উত্তর:


188

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

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

4
বাগটি সম্পর্কে এখানে আরও রেফারেন্স দিন: কোড. google.com/p/chromium/issues/detail?id=4505
রজত

প্রোটোটাইপ ব্যবহার করে কীভাবে এটি অর্জন করবেন?
তেহফিংক

আপনি 'ক্লিক' ইভেন্টটিকে আবদ্ধ করার চেষ্টা করতে পারেন এবং দুটি বাইন্ডিং করা এড়াতে পারেন।
uglymunky

@uglymunky আপনি যা করছেন তার উপর নির্ভর করে ক্লিক ইভেন্টের সাথে আবদ্ধ হওয়া সমস্ত ক্ষেত্রে কার্যকর হবে না - সর্বোপরি, কোনও ইনপুট ক্ষেত্রটি ক্লিক করার চেয়ে আরও কিছু উপায় আছে এবং আপনি সেগুলিও কাজ করতে চান (যেমন, এতে ট্যাবিং করা)
ট্যাক্রয়

4
আমি আইপ্যাড / আইফোনের সাফারিতে সঠিক আচরণ চাই। এটি আইপড / আইফোন ব্রাউজারগুলিতে কাজ করছে না। কোন সুত্র.
আনন্দ

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

4
যদি আপনি অ্যান্ড্রয়েডে চলমান ফোনগ্যাপ অ্যাপের জন্য কোনও ফর্ম ক্ষেত্রে পাঠ্য নির্বাচন করার চেষ্টা করছেন তবে এটি সেরা উত্তর। এটি ব্যবহারকারীর কাছে একটি চাক্ষুষ ইঙ্গিত দেয় যে পাঠ্যটি নির্বাচিত হয়েছে, তবে গৃহীত উত্তরটি তা দেয় না।
ব্যালিস্টিকপাগ

4

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

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

এটি একটি প্রকার = "পাঠ্য" উপাদান। আমি tried ("ইনপুট [টাইপ = পাঠ্য]]" চেষ্টা করেছিলাম। এখনও সাফারিতে jQuery 1.3.2 এর সাথে কাজ করছেন না।
ব্যবহারকারী140550

3

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

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

$("#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);
});

1

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

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


1

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

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

ওপি কেন সমস্যাটি দেখে এবং আপনার সমাধান এটি সমাধান করে তা নিয়ে গঠনমূলক প্রতিক্রিয়া যুক্ত করার বিষয়টি দয়া করে বিবেচনা করুন।
মিরকো আদারি

1

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

    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);

1

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 এ আর অনুমতি নেই )।


0

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

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

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.