jQuery - একটি টেক্সারিয়া থেকে সমস্ত পাঠ্য নির্বাচন করুন


130

আপনি যখন কোনও টেক্সটরিয়ার ভিতরে ক্লিক করেন, তখন এটির কীভাবে এটি তৈরি করতে পারি?

এবং অবশেষে যখন আপনি আবার ক্লিক করেন, এটি নির্বাচন থেকে মুক্ত করতে।



5
@ ব্লেন্ডার: না, এই প্রশ্নটি কোনও উপাদানটিতে পাঠ্যকে হাইলাইট করার বিষয়টি নিয়ে উদ্বেগ প্রকাশ করে, কোনও পাঠ্যকেই নয়। দুটি বেশ আলাদা।
টিম ডাউন

উত্তর:


194

ব্যবহারকারী যখন তাদের মাউস ব্যবহার করে ক্যারেটটি সরানোর চেষ্টা করবেন তখন পুরো পাঠ্যটি নির্বাচিত হয়ে গেলে ব্যবহারকারীকে বিরক্ত হওয়া থেকে বিরত রাখতে আপনার focusইভেন্টটি নয়, clickইভেন্টটি ব্যবহার করে এটি করা উচিত । নীচেরগুলি কাজটি করবে এবং Chrome এর এমন একটি সমস্যা ঘিরে কাজ করবে যা সহজতম সংস্করণটিকে (যেমন কেবল ইভেন্ট হ্যান্ডলারে টেক্সারিয়ার select()পদ্ধতিটিকে কল করা focus) কাজ করা থেকে বিরত রাখে।

জেএসফিডাল: http://jsfiddle.net/NM62A/

কোড:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

jQuery সংস্করণ:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

10
আমি মনে করি একটি পৃথক "সমস্ত পাঠ্য নির্বাচন করুন" বোতামটি ব্যবহার করে এই স্টাফটি প্রয়োগ করা ভাল, যেহেতু ফোকাসে বা পাঠ্য ইভেন্টগুলিতে পাঠ্যটি স্বয়ংক্রিয়ভাবে নির্বাচন করা সত্যই বিরক্তিকর।
রবিজি

2
এটি ক্রোমে আমার জন্য ব্যর্থ, কার্যক্ষম সমাধান: স্ট্যাকওভারফ্লো.com
6201757

@ জ্যাক: এই উত্তরের জেএসফিডাল উদাহরণটি ক্রোমে আমার পক্ষে কাজ করে। এটা আপনার জন্য না? আপনি যে উত্তরটির সাথে লিঙ্ক করেছেন সেটিকে আমি আরও নির্বোধ বলে সম্মত।
টিম ডাউন

@ টিমডাউন: আপনি ঠিক বলেছেন, আমি কিছুটা উদ্যোগী হয়ে উঠছিলাম - আসলে এটি 'ক্লিক' এ সঠিকভাবে কাজ করে তবে আপনি যদি tabটেক্সারিয়ায় প্রবেশ করেন তবে ব্যর্থ হন - আপনার অন্যান্য সমাধান উভয় ক্ষেত্রেই কাজ করে :)
জ্যাক ack

উপরের কোডটি সামান্য পরিবর্তন করুন এবং এটি একটি কবজির মতো কাজ করবে .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); আপনি thisকেবল পাঠ্যবক্সটি ব্যবহার না করে রেফার করতে হবে পুরো পথ দিয়ে .. এবং এটি কাজ করবে ..
প্রতীকবাবু

14

ট্যাব এবং ক্রোম সমস্যার সমাধান এবং নতুন jquery উপায় সহ আরও ভাল উপায়

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

11

আমি এটি ব্যবহার করে শেষ করেছি:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

তবে আমি টেক্সটটি ইতিমধ্যে নির্বাচিত কিনা তা যাচাই করতে জানি না, তাই আমি দুটি ক্রিয়াকে বিপরীত করতে পারি :(
অ্যালেক্স

1
@ অ্যালেক্স: আমি আপনি থাকলে আমি এ নিয়ে খুব বেশি গণ্ডগোল করব না। ব্যবহারকারীগণ টেক্সারিয়াসের কাছ থেকে স্ট্যান্ডার্ড আচরণের প্রত্যাশা করেন।
টিম ডাউন

না, এই নির্দিষ্ট পাঠ্যটি কেবল অনুলিপি-পেস্টের জন্য বোঝানো হয়েছে। আমার ভিতরে থাকা সমস্ত পাঠ্যটি একটি বড় এনক্রিপ্ট স্ট্রিং যা কেবল পুরোপুরি প্রতিস্থাপন করা যায়, বা ক্লিপবোর্ডে অনুলিপি করা যায়
অ্যালেক্স

@ অ্যালেক্স: আহ, ঠিক আছে। আপনি readonlyতখন এট্রিবিউট যুক্ত করে এটি কেবল পঠন করতে চান ।
টিম ডাউন

1
@ হোলিস্টার: না, ব্যবহারকারী বা স্ক্রিপ্ট উভয়ের পক্ষেই ডিভিডের মধ্যে সামগ্রী নির্বাচন করা পুরোপুরি সম্ভব। আপনি সম্ভবত ক্লিপবোর্ডে অনুলিপি করার কথা ভাবছেন, যা জিরো ক্লিপবোর্ডের মতো ফ্ল্যাশ-ভিত্তিক লাইব্রেরি ছাড়া স্ক্রিপ্টে সম্ভব নয়।
টিম ডাউন


5

সামান্য সংক্ষিপ্ত jQuery সংস্করণ:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

এটি ক্রোম কর্নারের কেসটি সঠিকভাবে পরিচালনা করে। উদাহরণের জন্য http://jsfiddle.net/Ztyx/XMkwm/ দেখুন ।


4

কোনও উপাদানটিতে পাঠ্য নির্বাচন করা (আপনার মাউসের সাহায্যে হাইলাইট করার অনুরূপ)

:)

এই পোস্টে স্বীকৃত উত্তরটি ব্যবহার করে আপনি ফাংশনটিকে এভাবে কল করতে পারেন:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

সম্ভবত এই প্রশ্নটিকে সদৃশ হিসাবে চিহ্নিত করা আরও কার্যকর হতে পারে? এটি আসলে আপনার উত্তর ছিল না, সুতরাং দুটি প্রশ্নের একত্রিত করা ভাল।
ব্লেন্ডার

সম্মত - যদিও ওপি তার বাস্তবায়নের জন্য অতিরিক্ত ব্যাখ্যা থেকে উপকৃত হতে পারে। :)
টড

এই প্রশ্নটি কোনও পাঠ্যের ক্ষেত্রে নয়, একটি উপাদানের পাঠ্যকে হাইলাইট করার বিষয়ে উদ্বেগ প্রকাশ করে। দুটি বেশ আলাদা।
টিম ডাউন

ধন্যবাদ, আমি খুঁজে পেয়েছি যে আমি এটি দিয়ে এটি করতে পারি $(this).select(), আমি এটি ব্যবহার করব কারণ এটির কম কোড রয়েছে :)
অ্যালেক্স
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.