इनपुट फोकस पर टेक्स्ट का चयन करें

Question

मेरे पास एक टेक्स्ट इनपुट है। जब इनपुट प्राप्त होता है तो मैं इनपुट के अंदर पाठ का चयन करना चाहता हूं।

JQuery के साथ मैं इसे इस तरह से करूंगा:

<input type="text" value="test" />

$("input[type=text]").click(function() {
    $(this).select();
    // would select "test" in this example
});

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

Comments

मैं समझता हूं कि आप 'कोणीय तरीका' खोजना चाहते हैं, लेकिन क्या ऐसा कोई कारण है जो आप अभी नहीं करेंगे <input type="text" value="test" onclick="this.select()" />?

— जोसेफ पी।

Answer 1

एंगुलर में ऐसा करने का तरीका एक कस्टम निर्देशन बनाना है जो आपके लिए ऑटोज्लेक्ट करता है।

module.directive('selectOnClick', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                if (!$window.getSelection().toString()) {
                    // Required for mobile Safari
                    this.setSelectionRange(0, this.value.length)
                }
            });
        }
    };
}]);

इस तरह से निर्देश लागू करें:

<input type="text" value="test" select-on-click />

View demo

अपडेट 1 : हटाए गए jQuery की निर्भरता।

Update2 : विशेषता के रूप में प्रतिबंधित करें।

अपडेट 3 : मोबाइल सफारी में काम करता है। पाठ का हिस्सा चुनने की अनुमति देता है (IE> 8 की आवश्यकता है)।

Comments

यदि आप jquery के बिना ऐसा करना चाहते हैं, तो element.bind ('क्लिक', फ़ंक्शन () {...} और element.select () से तत्व [0] .select ()

— jack

अच्छा और सुरुचिपूर्ण। मैं भी स्पष्ट रूप से निर्देश को विशेषता के रूप में लागू करने के लिए प्रतिबंधित करूंगा (एक वस्तु शाब्दिक और सेटिंग को वापस करके restrict: 'A'), क्योंकि यह निर्देश मौजूदा तत्व के व्यवहार का विस्तार करने के लिए है ।

— एलिरन मलका

@ किसी भी विचार को पृष्ठ पर खुले उपयोगकर्ता के क्लिक के बिना कैसे करें? समस्या यह है कि मेरे selectOnLoadनिर्देश लिंक () से पहले डिफ़ॉल्ट मान किसी अन्य नियंत्रक में सेट है । लेकिन लिंक में (), हालांकि गुंजाइश पहले से ही आबादी है, तत्व DOM अभी तक $ गुंजाइश के साथ सिंक नहीं किया गया है, इसलिए जब मैं select () कहता हूं, तो तत्व अभी भी खाली है और कुछ भी चयनित नहीं है। मेरे आसपास काम करने का एकमात्र तरीका $ टाइमआउट है, लेकिन मुझे लगता है कि कुछ नए कोणीय संस्करण के साथ काम करना बंद कर सकते हैं।

— Dzmitry Lazerka

यह डेस्कटॉप / एंड्रॉइड पर अच्छा काम करता है लेकिन जब मैं ipad पर कोशिश करता हूं तो यह काम नहीं करता है। क्या यहां कोई ज्ञात काम है?

— ak85

@ ak85 जाहिर तौर पर मोबाइल सफारी को कुछ अलग तरह की जावास्क्रिप्ट की जरूरत है

— अब्राहम चैन

Answer 2

यहां एक बढ़ा हुआ निर्देश है जो इनपुट बॉक्स में कर्सर की स्थिति पर क्लिक करने पर टेक्स्ट को फिर से भेजने से बचता है।

module.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            var focusedElement;
            element.on('click', function () {
                if (focusedElement != this) {
                    this.select();
                    focusedElement = this;
                }
            });
            element.on('blur', function () {
                focusedElement = null;
            });
        }
    };
})

Comments

मुझे लगता है कि यह उत्तर स्वीकृत से बेहतर है, क्योंकि यह दर्ज किए गए पाठ में कुछ स्थिति के लिए कर्सर को सेट करने की अनुमति देता है, लेकिन, एक निर्देश के रूप में स्वयं का दायरा है - मैं ध्यान केंद्रित चर का नाम बदलने का प्रस्ताव करता हूं, जो isFlementFocused और वहां स्टोर करता है सही या गलत

— व्लादिमीर

मैं बिना पढ़े टाइप टाइप करता हूं: अपरिभाषित .select () के लिए "यह" पर एक फ़ंक्शन नहीं है; और हाँ jQuery 1.9.1 शामिल है।

— रोबी स्मिथ

@RobbieSmith मैं 3 साल देर हो रही है, लेकिन के सभी उदाहरणों को बदलने thisके लिए element[0]यह काम करना चाहिए और। मैं यह भी बदलने की सलाह देता हूं कि यदि उपयोगकर्ता इनपुट पर क्लिक करने के बजाय उस पर क्लिक clickकरता है focusतो पाठ का चयन किया जाएगा।

— लेक्स

Answer 3

यह एक पुराना उत्तर है, कोणीय 1.x के लिए

इसका बेहतर तरीका ng-clickअंतर्निहित निर्देश का उपयोग करना है :

<input type="text" ng-model="content" ng-click="$event.target.select()" />

संपादित करें:

जैसा कि जोशमब ने याद दिलाया है; कोणीय 1.2+ में DOM नोड्स को संदर्भित करना अब अनुमति नहीं है। इसलिए, मैं $event.target.select()नियंत्रक में स्थानांतरित हो गया हूं :

<input type="text" ng-model="content" ng-click="onTextClick($event)" />

फिर अपने कंट्रोलर में:

$scope.onTextClick = function ($event) {
    $event.target.select();
};

यहाँ एक उदाहरण है बेला ।

Comments

जहाँ तक मैं बता सकता हूँ, यह अब समर्थित नहीं है। कोणीय एक त्रुटि फेंकता है: "कोणीय अभिव्यक्तियों में डोम नोड्स को संदर्भित करना अस्वीकृत है!"। अधिक जानकारी के लिए यह थ्रेड देखें: group.google.com/forum/# ​​.topic / angular / bsTbZ86WAY4 । हालांकि, निर्देशात्मक दृष्टिकोण अच्छी तरह से काम करता है।

— जोशएम

आप सही हे। यह एंगुलर 1.2+ का मामला है। मैं जवाब अपडेट कर दूंगा।

— ओनूर येल्ड्रिम

निर्देश में डोम परिवर्तन किया जाना चाहिए या नहीं?

— पायियो

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

— प्रीसैस्टिक

गंभीरता से, यहां तक ​​कि onTextClick ($ घटना) अब त्रुटि फेंक रही है। इस जानवर की सहज-स्वाभाविक प्रकृति के अलावा, यह असुविधा हमें प्रदर्शन में कितनी लागत आती है?

— jcalfee314

Answer 4

न तो प्रस्तावित समाधानों ने मेरे लिए अच्छा काम किया। त्वरित शोध के बाद मैं इसके साथ आया:

module.directive('selectOnFocus', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var focusedElement = null;

            element.on('focus', function () {
                var self = this;
                if (focusedElement != self) {
                    focusedElement = self;
                    $timeout(function () {
                        self.select();
                    }, 10);
                }
            });

            element.on('blur', function () {
                focusedElement = null;
            });
    }

  }

});

यह प्रस्तावित कई समाधानों का मिश्रण है, लेकिन क्लिक और फोकस (थिंक ऑटोफोकस) पर काम करता है और इनपुट में आंशिक मूल्य के मैनुअल चयन की अनुमति देता है।

Comments

सिंटैक्स त्रुटि सही: अंतिम}); द्वारा हटाया गया: } }; });

— ब्लैक फेयर

यह एक इनपुट प्रकार = "संख्या" के लिए काम करता है, जो बहुत अच्छा है! धन्यवाद

— लुइस

अरे, यह एंड्रॉइड में Ionic के लिए काम करता है, लेकिन iOS में नहीं ... किसी भी विचार क्यों? धन्यवाद

— लुई

लगता है जैसे आपने कुछ कोड को पीछे छोड़ दिया जब आपने इसे onClick से अनुकूलित किया ... इसका क्या मतलब है focusedElement?

— लैंगडन

Answer 5

मेरे लिए, एनजी-क्लिक का कोई मतलब नहीं था, क्योंकि आप सभी टेक्स्ट को फिर से चुने बिना कर्सर को कभी भी रिपोज नहीं कर सकते, मैंने पाया कि यह एनाउंस कर रहा था। फिर एनजी-फ़ोकस का उपयोग करना बेहतर होता है, क्योंकि टेक्स्ट का चयन केवल तभी किया जाता है जब इनपुट फ़ोकस नहीं किया जाता है, यदि आप कर्सर को फिर से क्लिक करने के लिए क्लिक करते हैं तो टेक्स्ट केवल अपेक्षा के अनुसार चयन करता है, और आप बीच में लिख सकते हैं।

मुझे यह दृष्टिकोण अपेक्षित UX व्यवहार के रूप में मिला।

एनजी-फोकस का उपयोग करें

विकल्प 1: अलग कोड

<input type="text" ng-model="content" ng-focus="onTextFocus($event)" />

और नियंत्रक में

$scope.onTextFocus = function ($event) {
  $event.target.select();
};

विकल्प 2: एक विकल्प के रूप में आप ऊपर दिए गए कोड को "वन-लाइनर" में शामिल कर सकते हैं (मैंने यह परीक्षण नहीं किया है लेकिन यह काम करना चाहिए)

<input type="text" ng-model="content" ng-focus="$event.target.select()" />

Comments

सरल और यह काम करता है। यह चयनित पाठ के भीतर आपके कर्सर की स्थिति के लिए भी अनुमति देता है, जैसा कि ऊपर चर्चा की गई है।

— पिस्तौल-पीट

Answer 6

कोणीय 2 में, इसने मेरे लिए क्रोम और फ़ायरफ़ॉक्स दोनों में काम किया:

<input type="text" (mouseup)="$event.target.select()">

Answer 7

स्वीकृत उत्तर क्लिक इवेंट का उपयोग कर रहा है, लेकिन यदि आप फ़ोकस इवेंट का उपयोग करते हैं, तो केवल 1 क्लिक से ही ईवेंट में आग लग जाएगी और यह तब भी फ़ोकस करता है जब इनपुट पर ध्यान केंद्रित करने के लिए किसी अन्य विधि का उपयोग किया जाता है (जैसे टैब को हिट करना या कोड में फ़ोकस कॉल करना)।

यह जांचने के लिए भी अनावश्यक है कि क्या तत्व पहले से ही केंद्रित है जैसा कि टैमलिन का उत्तर बताता है।

app.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('focus', function () {
                this.select();
            });
        }
    };
});

Comments

फ़ायरफ़ॉक्स में 38.0.5 टेक्स्ट के मध्य में क्लिक करने से पहले सभी का चयन होता है, लेकिन फिर चयन को हटा देता है, इसलिए यह काम नहीं करेगा।

— user1338062

यह शायद देरी के बिना लगातार काम करने के लिए नहीं जा रहा है this.select।

— लैंगडन

Answer 8

किसी निर्देश की आवश्यकता नहीं है, बस onfocus="this.select()"इनपुट तत्व या पाठ क्षेत्र में देशी जावास्क्रिप्ट जोड़ें ।

Comments

कैसे इतने सारे लोग इन सभी जटिल उत्तरों के साथ आते हैं, जब सबसे आसान तरीका यहां है: डी धन्यवाद एडम

— स्विसकोड

Answer 9

संशोधित संस्करण जिसने मेरे लिए काम किया। पहला चयन पाठ का चयन करता है, दूसरा उसी तत्व पाठ पर क्लिक करता है

module.directive('selectOnClick', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var prevClickElem = null; //Last clicked element
        var ignorePrevNullOnBlur = false; //Ignoring the prevClickElem = null in Blur massege function

        element.on('click', function () {
            var self = this;
            if (prevClickElem != self) { //First click on new element
                prevClickElem = self; 
                $timeout(function () { //Timer
                    if(self.type == "number")
                        self.select();
                    else
                        self.setSelectionRange(0, self.value.length)
                }, 10);
            }
            else { //Second click on same element
                if (self.type == "number") {
                    ignorePrevNullOnBlur = true;
                    self.blur();
                }
                else
                    self.setSelectionRange(self.value.length, self.value.length); //deselect and set cursor on last pos
            }
        });

        element.on('blur', function () {
            if (ignorePrevNullOnBlur == true)
                ignorePrevNullOnBlur = false; //blur called from code handeling the second click 
            else
                prevClickElem = null; //We are leaving input box
        });
    }
}

})