jQuery - एक textarea से सभी पाठ का चयन करें

Question

मैं इसे कैसे बना सकता हूं जब आप एक टेक्सारिया के अंदर क्लिक करते हैं, तो इसकी पूरी सामग्री का चयन हो जाता है।

और अंत में जब आप फिर से क्लिक करते हैं, तो इसे अचयनित करें।

Comments

JQuery के

— ब्लेंडर

@ ब्लेंडर: नहीं, यह सवाल एक तत्व में पाठ को उजागर करने की चिंता करता है, न कि एक टेक्स्टरी। दोनों काफी अलग हैं।

— टिम डाउन

Answer 1

उपयोगकर्ता को तब परेशान होने से रोकने के लिए जब पूरा पाठ हर बार उनके माउस का उपयोग करके कैरेट को स्थानांतरित करने का प्रयास करता है, आपको इस focusघटना का उपयोग करना चाहिए , न कि clickघटना का। निम्नलिखित काम करेगा और क्रोम में एक समस्या के आसपास काम करता है जो सरलतम संस्करण को रोकता है (यानी select()एक focusइवेंट हैंडलर में textarea की विधि को कॉल करने से) काम करने से।

jsFiddle: 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;
    });
});

Comments

मुझे लगता है कि एक अलग "सिलेक्ट ऑल टेक्स्ट" बटन का उपयोग करके इस सामान को लागू करना बेहतर है क्योंकि स्वचालित रूप से फ़ोकस पर पाठ का चयन करना या ईवेंट पर क्लिक करना वास्तव में कष्टप्रद है।

— रॉब

क्रोम में मेरे लिए यह विफल रहता है, काम करने वाला समाधान है: stackoverflow.com/a/6201757/126600

— zack

@zack: इस उत्तर में jsFiddle उदाहरण क्रोम में मेरे लिए काम करता है। क्या यह आपके लिए नहीं है? मैं सहमत हूं कि आप जिस उत्तर से जुड़े हैं वह अधिक मूर्ख है।

— टिम डाउन

@ टिमडाउन: आप सही कह रहे हैं, मैं थोड़ा जोश में था - वास्तव में यह 'क्लिक' पर सही ढंग से काम करता है, लेकिन यदि आप टैक्स्टेरिया में फेल होते हैं tab- आपका अन्य समाधान दोनों मामलों के लिए काम करता है :)

— zack

उपरोक्त कोड को थोड़ा बदलें और यह एक आकर्षण की तरह काम करेगा .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); आपको टेक्स्ट बॉक्स को thisकेवल पूर्ण पथ के साथ उपयोग किए बिना संदर्भित करने की आवश्यकता है .. और यह काम करेगा ..

— pratikabu

Answer 2

बेहतर तरीका है, टैब और क्रोम समस्या के समाधान और नए 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;
            });
        }
    });

Answer 3

मैंने इसका उपयोग करते हुए समाप्त किया:

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

Comments

लेकिन मुझे नहीं पता कि अगर पाठ पहले से ही चयनित है, तो मैं कैसे जांच करूं, इसलिए मैं दो कार्यों को उलट सकता हूं :(

— एलेक्स

@ एलेक्स: अगर मैं तुम होते तो मैं इसके साथ बहुत ज्यादा गड़बड़ नहीं करता। उपयोगकर्ता textareas से मानक व्यवहार की उम्मीद करते हैं।

— टिम डाउन

नहीं, यह विशेष रूप से textarea केवल कॉपी-पेस्ट के लिए है। मेरे अंदर मौजूद सभी पाठ एक बड़ी संकरी स्ट्रिंग है जो केवल या तो पूरी तरह से बदली जा सकती है, या क्लिपबोर्ड पर कॉपी की जा सकती है

— एलेक्स

@ एलेक्स: आह, ठीक है। आप इसे केवल readonlyविशेषता जोड़कर रीड-ओनली बनाना चाहते हैं ।

— टिम डाउन

@ हॉलिस्टर: नहीं, यह पूरी तरह से उपयोगकर्ता या स्क्रिप्ट के लिए एक div के भीतर सामग्री का चयन करने के लिए संभव है। आप शायद क्लिपबोर्ड पर कॉपी करने के बारे में सोच रहे हैं, जो कि ज़ीरोक्लिपबोर्ड जैसी फ्लैश-आधारित लाइब्रेरी के बिना स्क्रिप्ट में संभव नहीं है।

— टिम डाउन

Answer 4

$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

Answer 5

थोड़ा छोटा jQuery का संस्करण:

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

यह क्रोम कॉर्नर केस को सही तरीके से हैंडल करता है। एक उदाहरण के लिए http://jsfiddle.net/Ztyx/XMkwm/ देखें ।

Answer 6

एक तत्व में पाठ का चयन करना (अपने माउस से हाइलाइट करना)

:)

उस पोस्ट पर स्वीकृत उत्तर का उपयोग करके, आप फ़ंक्शन को इस तरह से कॉल कर सकते हैं:

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

Comments

हो सकता है कि इस प्रश्न को डुप्लिकेट के रूप में चिह्नित करना अधिक उपयोगी हो सकता है? यह वास्तव में आपका उत्तर नहीं था, इसलिए दो प्रश्नों को मर्ज करना बेहतर होगा।

— ब्लेंडर

सहमत - यद्यपि ओपी को उसके कार्यान्वयन के लिए अतिरिक्त स्पष्टीकरण से लाभ हो सकता है। :)

— टोड

यह सवाल एक तत्व में पाठ को उजागर करने की चिंता करता है, न कि एक पाठ। दोनों काफी अलग हैं।

— टिम डाउन

धन्यवाद, मुझे पता चला कि मैं इसके साथ कर सकता $(this).select()हूं, मैं इसका इस्तेमाल करूंगा क्योंकि यह कम कोड है :)

— एलेक्स