[angularjs] इनपुट फोकस पर पाठ का चयन करें


Answers

यहां एक उन्नत निर्देश दिया गया है जो उपयोगकर्ता को इनपुट बॉक्स में कर्सर की स्थिति पर क्लिक करने पर टेक्स्ट को पुन: चयन करने से बचाता है।

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

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

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

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

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




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

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

  }

});

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




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

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

})




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

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

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



Related