ইনপুট ফোকাসে পাঠ্য নির্বাচন করুন


121

আমার কাছে একটি পাঠ্য ইনপুট রয়েছে। যখন ইনপুটটি ফোকাস পায় আমি ইনপুটটির ভিতরে থাকা পাঠ্যটি নির্বাচন করতে চাই।

JQuery দিয়ে আমি এটি এইভাবে করতাম:

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

কৌণিক উপায়ে চেষ্টা করার জন্য আমি আশেপাশে অনুসন্ধান করেছি তবে বেশিরভাগ উদাহরণ আমি খুঁজে পেয়েছি এমন একটি নির্দেশের সাথে কাজ করছি যা পরিবর্তনের জন্য একটি মডেল সম্পত্তি দেখছে। আমি ধরে নিচ্ছি আমার এমন একটি নির্দেশিকা দরকার যা ফোকাস গ্রহণ করে এমন একটি ইনপুট অনুসন্ধান করছে। আমি যে কিভাবে করতে হবে?


আমি বুঝতে পারছি আপনি একটি 'কৌণিক উপায়' সন্ধান করতে চান, তবে এমন কোনও কারণ আছে যা আপনি কেবল করেননি <input type="text" value="test" onclick="this.select()" />?
জোসেফ পি।

উত্তর:


216

কৌণিক ক্ষেত্রে এটি করার উপায় হ'ল একটি কাস্টম নির্দেশিকা তৈরি করা যা আপনার জন্য স্বনির্বাচিত করে।

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 নির্ভরতা সরানো হয়েছে।

আপডেট 2 : গুণ হিসাবে সীমাবদ্ধ।

আপডেট 3 : মোবাইল সাফারিতে কাজ করে। পাঠ্যের অংশ নির্বাচনের অনুমতি দেয় (আইই> 8 প্রয়োজন)।


10
আপনি jQuery ছাড়া এই কাজ করতে চান তাহলে, পরিবর্তন element.click element.bind করার জন্য ( 'ক্লিক করুন', উপাদান [0] ফাংশন () {...} এবং element.select () .select ()
জ্যাক

3
সুন্দর এবং মার্জিত। অ্যাট্রিবিউট হিসাবে প্রয়োগ করার নির্দেশকে আমি স্পষ্টতই সীমাবদ্ধ করব (কোনও বস্তুকে আক্ষরিক এবং সেটিংস ফিরিয়ে দিয়ে restrict: 'A'), কারণ এই নির্দেশের উদ্দেশ্য বিদ্যমান উপাদানটির আচরণ প্রসারিত করার উদ্দেশ্যে ।
ইলিরান মালকা

@ মার্টিনের কোনও ধারণা কীভাবে ব্যবহারকারী ক্লিক ছাড়াই পৃষ্ঠায় উন্মুক্ত করবেন? সমস্যাটি হ'ল আমার selectOnLoadনির্দেশিকা লিংক () -র আগে ডিফল্ট মানটি অন্য নিয়ামকটিতে সেট করা থাকে । তবে লিঙ্কে (), যদিও স্কোপটি ইতিমধ্যে পপুলেটেড, এলিমেন্ট ডিওএম এখনও $ সুযোগের সাথে সিঙ্ক হয় নি, তাই যখন আমি নির্বাচন () নির্বাচন করি তখন উপাদানটি খালি থাকে এবং কিছুই নির্বাচিত হয় না। আমি যে সন্ধান পেয়েছি তার চারপাশে কাজ করার একমাত্র উপায় হ'ল $ সময়সীমা, তবে আমার মনে হয় যে এটি কিছু নতুন কৌণিক সংস্করণে কাজ করা বন্ধ করতে পারে।
ডিজিট্রি লেজারকা

এটি ডেস্কটপ / অ্যান্ড্রয়েডে ভাল কাজ করে তবে আমি যখন আইপ্যাডে চেষ্টা করি তখন মনে হয় এটি কাজ করে না। এখানে কি কোনও পরিচিত কাজ আছে?
ak85


44

এখানে একটি বর্ধিত নির্দেশনা দেওয়া হয়েছে যা যখন ব্যবহারকারীরা ইনপুট বাক্সে কার্সারটি স্থির করতে ক্লিক করে তখন পাঠ্য পুনরায় সন্ধান করা এড়ায়।

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

3
আমি মনে করি এই উত্তর গৃহীত পাঠকের চেয়ে উত্তম, কারণ এটি প্রবেশ করানো পাঠ্যের কিছু স্থানে কার্সার সেট করতে দেয় তবে একটি নির্দেশিকা হিসাবে তার নিজস্ব সুযোগ রয়েছে - আমি ফোকাসডিলিমেট ভেরিয়েবলের নামকরণের প্রস্তাব করছি এলিটফোকাস এবং সেখানে সত্য বা মিথ্যা সংরক্ষণ করি
ভ্লাদিমির গর্ডিয়েনকো

2
আমি আনচাট টাইপ এরির পাই: অপরিবর্তিত .সलेक्ट () এর জন্য "এটি" তে কোনও ফাংশন নয়; এবং হ্যাঁ jQuery 1.9.1 অন্তর্ভুক্ত করা হয়েছে।
রবি স্মিথ

@RobbieSmith আমি 3 বছর দেরি করে ফেলেছি, কিন্তু সমস্ত উদাহরণ পরিবর্তন thisকরতে element[0]এটি কাজ করা উচিত না। আমি এটিকেও পরিবর্তিত clickকরার পরামর্শ দিচ্ছি focusযাতে ব্যবহারকারী এতে ক্লিক না করে ইনপুটটিতে ট্যাব রাখলে সেই পাঠ্যটি নির্বাচন করা হবে।
লেেক্স

40

এটি একটি পুরানো উত্তর, কৌণিক 1.x এর জন্য

এটি করার সর্বোত্তম উপায় হ'ল ng-clickবিল্ট-ইন নির্দেশিকা ব্যবহার করে :

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

সম্পাদনা করুন:

যেমন জোশএমবি সদয়ভাবে স্মরণ করিয়ে দিয়েছে; কৌণিক 1.2+ এ ডিওএম নোডকে রেফারেন্স করার অনুমতি নেই। সুতরাং, আমি $event.target.select()নিয়ামকের মধ্যে চলে এসেছি :

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

তারপরে আপনার নিয়ামকটিতে:

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

এখানে একটি উদাহরণ ফ্রিডল


2
আমি যতদূর বলতে পারি, এটি আর সমর্থন করে না। কৌণিক একটি ত্রুটি নিক্ষেপ করে: "কৌণিক এক্সপ্রেশনগুলিতে ডিওএম নোডের রেফারেন্সিং অনুমোদিত নয়!" আরও তথ্যের জন্য এই থ্রেডটি দেখুন: groups.google.com/forum/#!topic/angular/bsTbZ86WAY4 । নির্দেশিকা পন্থা অবশ্য কার্যকরভাবে কাজ করে।
JoshMB

তুমি ঠিক বলছো. এটি Angular 1.2+ এর ক্ষেত্রে। আমি উত্তর আপডেট করব।
ওনুর ইল্ডারিয়াম

2
DOM পরিবর্তন নির্দেশে করা উচিত, না?
পাইইউ

কিছু কারণে অন্যান্য সমাধানগুলি আমার পক্ষে কার্যকর হয়নি তবে এটি কাজ করে। আমি মনে করি সমস্যাটি হ'ল আমি ইতিমধ্যে যে উপাদানটিতে এই ক্লিক ইভেন্টটি যুক্ত করছি সে বিষয়ে আমার একটি নির্দেশিকা ছিল।
পূর্বাভাস

গুরুতরভাবে, এমনকি অন্টেক্সট ক্লিক ($ ইভেন্ট) এখন ত্রুটিটি ছুঁড়ে দিচ্ছে। এই জানোয়ারের অ-স্বজ্ঞাত প্রকৃতি বাদে, এই অসুবিধাগুলি আমাদের পারফরম্যান্সে কত ব্যয় করে?
jcalfi314

15

প্রস্তাবিত সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি। দ্রুত গবেষণার পরে আমি এটি নিয়ে এসেছি:

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

  }

});

এটি প্রস্তাবিত বেশ কয়েকটি সমাধানের মিশ্রণ, তবে ক্লিক এবং ফোকাস উভয়ই কাজ করে (অটোফোকাস ভাবেন) এবং ইনপুটটিতে আংশিক মানের ম্যানুয়াল নির্বাচনের অনুমতি দেয়।


1
সিনট্যাক্স ত্রুটি সংশোধন করা হয়েছে: শেষ}); দ্বারা পরিবর্তীত: } }; });
ব্ল্যাকফায়ার

এইটি ইনপুট টাইপ = "সংখ্যা" জন্য কাজ করে, যা দুর্দান্ত! ধন্যবাদ
লুই

আরে, এটি অ্যান্ড্রয়েডে আয়নিকের জন্য কাজ করে, তবে আইওএসে নয় ... কোনও ধারণা কেন? ধন্যবাদ
লুই

2
মনে হচ্ছে আপনি যখন অনক্লিক থেকে এটি মানিয়ে নিয়েছেন তখন কিছু কোড রেখে গেছেন ... কীসের মূল বিষয় focusedElement?
ল্যাংডন

12

আমার জন্য, এনজি-ক্লিকের কোনও বুদ্ধি নেই, কারণ আপনি সমস্ত পাঠ্য আবার নির্বাচন না করে কার্সারটি পুনরায় স্থাপন করতে পারবেন না, আমি পেয়েছি এটি বিরক্তিকর। তারপরে এনজি-ফোকাস ব্যবহার করা আরও ভাল, কারণ পাঠ্যটি কেবল তখনই নির্বাচিত হয় যদি ইনপুটটি ফোকাস না করা হয়, আপনি যদি কার্সারটি প্রতিস্থাপনের জন্য আবার ক্লিক করেন তবে পাঠ্যটি প্রত্যাশিত হিসাবে কেবল অপসারণ করা হয় এবং আপনি এর মধ্যে লিখতে পারেন।

আমি এই পদ্ধতির প্রত্যাশিত ইউএক্স আচরণ বলে মনে করেছি।

এনজি-ফোকাস ব্যবহার করুন

বিকল্প 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()" />

সহজ এবং এটি কাজ করে। এটি উপরে বর্ণিত হিসাবে নির্বাচিত পাঠ্যের মধ্যে আপনার কার্সারের অবস্থানের জন্যও অনুমতি দেয়।
পিস্তল-পিট

7

কৌনিক 2 এ, এটি ক্রোম এবং ফায়ারফক্স উভয় ক্ষেত্রেই আমার পক্ষে কাজ করেছে:

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

6

গৃহীত উত্তরটি ক্লিক ইভেন্টটি ব্যবহার করছে তবে আপনি যদি ফোকাস ইভেন্টটি ব্যবহার করেন তবে কেবল প্রথম লিঙ্কটিই ইভেন্টটিকে আগুন ধরিয়ে দেবে এবং যখন অন্য কোনও পদ্ধতি ইনপুটটিতে ফোকাস দেওয়ার জন্য ব্যবহৃত হয় (যেমন ট্যাবে আঘাত করা বা কোডটিতে ফোকাস কল করা))

এটি তমলিনের উত্তরের পরামর্শ অনুসারে উপাদানটি ইতিমধ্যে ফোকাস করা হয়েছে কিনা তা পরীক্ষা করাও অপ্রয়োজনীয় করে তোলে।

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

ফায়ারফক্স ৩৮.০.৫-এ পাঠ্যের মাঝখানে ক্লিক করা প্রথমে সমস্ত নির্বাচন করে, কিন্তু তারপরে নির্বাচনটি সরিয়ে দেয়, সুতরাং এটি কাজ করবে না।
ব্যবহারকারী 1338062

1
এটি সম্ভবত আর দেরি না করে ধারাবাহিকভাবে কাজ করবে না this.select
ল্যাংডন

6

কোনও নির্দেশের প্রয়োজন নেই, কেবল onfocus="this.select()"ইনপুট উপাদান বা পাঠ্য ক্ষেত্রে দেশীয় জাভাস্ক্রিপ্ট যুক্ত করুন।


1
কীভাবে এত লোক এই জটিল জটিল উত্তরগুলি নিয়ে আসে, যখন এখানে সবচেয়ে সহজ উপায় এখানে আসে: ডি আপনাকে ধন্যবাদ আদম
সুইসকোডার

0

পরিবর্তিত সংস্করণ যা আমার পক্ষে কাজ করেছে। প্রথমে ক্লিক পাঠ্য নির্বাচন করে, দ্বিতীয় উপাদানটিতে একই ক্লিক করে পাঠ্যটি নির্বাচন করা হয়েছে

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

})

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.