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




4 Answers

कोणीय में ऐसा करने का तरीका एक कस्टम निर्देश बनाना है जो आपके लिए स्वत: चयन करता है।

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 />

डेमो देखें

अद्यतन 1 : हटाया गया jQuery निर्भरता।

अद्यतन 2 : विशेषता के रूप में प्रतिबंधित करें।

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

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

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

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

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




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

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

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

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

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

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

फिर अपने नियंत्रक में:

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

यहाँ एक उदाहरण बेवकूफ है




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

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

ng-focus प्रयोग करें

विकल्प 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()" />



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

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



Related