ক্লিক করার সময় এইচটিএমএল পাঠ্য ইনপুটটিতে সমস্ত পাঠ্য নির্বাচন করা

Question

এইচটিএমএল ওয়েবপৃষ্ঠায় একটি পাঠ্যবক্স প্রদর্শন করার জন্য আমার কাছে নিম্নলিখিত কোড রয়েছে।

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

পৃষ্ঠাটি প্রদর্শিত হয়, লেখায় ব্যবহারকারী আইডি বার্তা প্রবেশ করুন দয়া করে । তবে, আমি দেখতে পেয়েছি যে সমস্ত পাঠ্য নির্বাচন করতে ব্যবহারকারীর 3 বার ক্লিক করতে হবে (এই ক্ষেত্রে এটি দয়া করে ব্যবহারকারীর আইডি লিখুন )।

কেবল একটি ক্লিকের মাধ্যমে পুরো পাঠটি নির্বাচন করা সম্ভব?

সম্পাদনা:

দুঃখিত, আমি বলতে ভুলে গেছি: আমাকে অবশ্যই ইনপুটটি ব্যবহার করতে হবে type="text"

Comments

একটি আরও ভাল পদ্ধতির <label>জন্য লেবেলটির জন্য ব্যবহার করা নয় value। আপনি জেএস এবং সিএসএসকে দেখতে একইরকম তৈরি করতে ব্যবহার করতে পারেন, যদিও এতটা বিরোধী-শব্দার্থবিরোধী না হয়ে থাকেন। dorward.me.uk/tmp/label-work/example.html jQuery ব্যবহার করে একটি উদাহরণ রয়েছে।

— কোয়ান্টিন

অথবা এমনকি আপনি যদি কোনও আধুনিক, এইচটিএমএল 5 প্রকল্পে কাজ করছেন তবে কোনও স্থানধারক ব্যবহার করুন।

— লিয়ো লাম

স্থানধারক = "দয়া করে ব্যবহারকারীর আইডি লিখুন"

— মার্সেলো বোনাস

Answer 1

আপনি এই জাভাস্ক্রিপ্ট স্নিপেট ব্যবহার করতে পারেন:

<input onClick="this.select();" value="Sample Text" />

তবে দৃশ্যত এটি মোবাইল সাফারিটিতে কাজ করে না। এই ক্ষেত্রে আপনি ব্যবহার করতে পারেন:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

Comments

আরও সাধারণ করতে আপনি this.idক্লিক হ্যান্ডলারের পক্ষে যুক্তি হিসাবে ব্যবহার করতে পারেন । আরও ভাল, আপনি getElementByIdসম্পূর্ণরূপে মুছে ফেলতে এবং thisএকটি তর্ক হিসাবে পাস করতে পারে ।

— আসাদ সাইদুদ্দিন

মোবাইলে সাফারি যা কাজ করে না। পরিবর্তে এটি.সেটসলেশনরেঞ্জ (0, 9999) কল করার চেষ্টা করুন।

— ডিন র‌্যাডক্লিফ

পছন্দ করুন আমি this.setSelectionRange(0, this.value.length)পরিবর্তে ব্যবহার করব ।

— 2grit

কেন আমি ইনলাইন স্ক্রিপ্টিং এড়ানো উচিত?

— আইলিয়ান ওনোফ্রেই

ব্রাউজার সমর্থনে কোনও আপডেট? w3schools.com/jsref/met_text_select.asp দাবি করেছে এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত

— আয়শ

Answer 2

পূর্বে পোস্ট করা সমাধানগুলিতে দুটি কুইর্ক রয়েছে:

1. ক্রোমে।। নির্বাচন () এর মাধ্যমে নির্বাচন স্থির থাকে না - সামান্য সময়সীমা যুক্ত করা এই সমস্যাটির সমাধান করে।
2. ফোকাসের পরে পছন্দসই পয়েন্টে কার্সারটি রাখা অসম্ভব।

এখানে একটি সম্পূর্ণ সমাধান যা ফোকাসের সমস্ত পাঠ্য নির্বাচন করে, তবে ফোকাসের পরে নির্দিষ্ট কার্সার পয়েন্ট নির্বাচন করার অনুমতি দেয়।

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

Comments

ব্যবহারকারী ক্ষেত্র থেকে দূরে ক্লিক করে আবার .on('blur', 'input', function(){focusedElement = null;})

— কেসটি পরিচালনা

0ক্রোম এবং ফায়ারফক্সে আমার জন্য একটি সময়সীমা কাজ করে। আপনার সময়সীমা কোথায় 50এসেছিল তা নিশ্চিত নয় ।

— thejoshwolfe

সমাধানটি হ'ল ফোকাসের পরিবর্তে অনক্লিক ব্যবহার করা। নিখুঁতভাবে কাজ করে এবং জটিল কোডগুলির প্রয়োজন হয় না।

— ইসমাইল

@ কোরিহাউস এটি কোনও বিষয় নয় কারণ ট্যাবটির মাধ্যমে ফোকাসটি স্থানীয়ভাবে পাঠ্যটি নির্বাচন করুন! কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই।

— ইসমাইল

@ কোরিহাউস 4 বছর পরেও আপনার কোডগুলি কবজ হিসাবে কাজ করে। মানুষ, একটি ধনুক নিন। এই ছোট্ট নোংরা হ্যাকের জন্য ধন্যবাদ। আমি এটিটি না পাওয়া পর্যন্ত আমি ২-৩ দিন সন্ধান করছিলাম। : +1:

— utতুভিজ কোঠারি

Answer 3

এইচটিএমএল (আপনি পৃষ্ঠায় কাজ করতে চান এমন প্রতিটি ইনপুটটিতে আপনাকে অনক্লিক অ্যাট্রিবিউট লাগাতে হবে)

 <input type="text" value="click the input to select" onclick="this.select();"/>

বা আরও ভাল বিকল্প

jQuery (এটি পৃষ্ঠায় প্রতিটি পাঠ্য ইনপুট জন্য কাজ করবে, আপনার এইচটিএমএল পরিবর্তন করার প্রয়োজন নেই):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

Comments

যারা ফর্ম উপাদানগুলির মাধ্যমে ট্যাব করেন তাদের জন্য ক্লিক করার চেয়ে ফোকাস ইভেন্টটিতে আবদ্ধ হওয়ার চেয়ে সম্ভবত আরও ভাল।

— অ্যান্ড্রু এনসলে

@ অ্যান্ড্রু এটি প্রয়োজনীয় নয় কারণ আপনি যদি ইনপুট উপাদানগুলির মাধ্যমে ট্যাব করেন তবে পাঠ্যটি সর্বদা নির্বাচিত হয়। ;-)

— nietonfir

ফোকাস ইভেন্টগুলি চটকদার, অন্যদিকে ঝাপসা ঘটনাটি বৈধতা এবং ফর্মগুলির স্বতঃ-সংরক্ষণের ট্রিগার করার কাজে আসে, যখন আপনি খুব ট্যাব ব্যবহার করেন!

— oLinkWeb উন্নয়ন 20

ঠিকঠাক কাজ করা উচিত, নিশ্চিত করুন যে আপনি jQuery এর একটি আপডেট সংস্করণ ব্যবহার করছেন বা পুরানো সংস্করণগুলিতে $ (ডকুমেন্ট) .live () ব্যবহার করছেন।

— oLinkWeb ডেভেলপমেন্ট

ব্যবহারকারীর ইতিমধ্যে jQuery না থাকলে তৃতীয় পক্ষের লাইব্রেরিতে নির্ভরতা যুক্ত করার কোনও আরও ভাল বিকল্প জড়িত না।

— রস

Answer 4

আমি জানি এটি পুরানো, তবে সর্বোত্তম বিকল্পটি হ'ল placeholderসম্ভব হলে নতুন এইচটিএমএল বৈশিষ্ট্যটি ব্যবহার করা :

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

এটি পাঠ্য বা ক্লিপ ইনপুট নির্বাচন করার প্রয়োজনীয়তা বাদ দিয়ে কোনও মান প্রবেশ না করা পর্যন্ত পাঠ্যটি প্রদর্শন করবে।

Comments

দয়া করে নোট করুন যে স্থানধারক কেবলমাত্র ডকটিটিপ এইচটিএমএল সহ অনুমোদিত।

— ডগাওয়াফ

Answer 5

তালিকাভুক্ত উত্তরগুলি আমার মতে আংশিক। আমি কৌণিক এবং জিকুয়েরির সাথে এটি কীভাবে করব তার দুটি উদাহরণ নীচে লিঙ্ক করেছি।

এই সমাধানের নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে:

• JQuery, সাফারি, ক্রোম, আইই, ফায়ারফক্স ইত্যাদি সমর্থন করে এমন সমস্ত ব্রাউজারের জন্য কাজ করে
• ফোনগ্যাপ / কর্ডোভা জন্য কাজ করে: অ্যান্ড্রয়েড এবং আইও।
• পরের অস্পষ্টতা এবং তারপরে ফোকাস না হওয়া পর্যন্ত ইনপুট ফোকাস পাওয়ার পরে কেবল একবারই সমস্ত নির্বাচন করে
• একাধিক ইনপুট ব্যবহার করা যেতে পারে এবং এটি ভুল হয় না।
• কৌণিক দিকনির্দেশনায় দুর্দান্ত পুনরায় ব্যবহার রয়েছে কেবলমাত্র ক্লিক-এ-ক্লিক-তে ক্লিক করুন
• JQuery সহজেই পরিবর্তন করা যেতে পারে

জিকুয়েরি: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p= পূর্বরূপ

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

কৌণিক: http://plnkr.co/edit/llcyAf?p= পূর্বরূপ

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

Comments

চমৎকার Angularjs সমাধান। ধন্যবাদ. যদিও আমি হ্যাডসিলেক্টডএল পতাকা ব্যবহার করি না। আমার মনে হয় এটি দ্বিতীয় ক্লিকের জন্য একটি বিধান যার অর্থ ব্যবহারকারী ব্যবহারকারী কার্সারটি রাখতে চান।

— শিশির

Answer 6

চেষ্টা করুন:

onclick="this.select()"

এটি আমার জন্য খুব ভালো কাজ করছে।

Answer 7

আপনি সর্বদা ব্যবহার করতে পারেন document.execCommand( সমস্ত বড় ব্রাউজারে সমর্থিত )

document.execCommand("selectall",null,false);

বর্তমানে মনোনিবেশ করা উপাদানটিতে সমস্ত পাঠ্য নির্বাচন করে।

Comments

এটি একটি মার্জিত সমাধান বলে মনে হচ্ছে। সম্পূর্ণ কোডটি দেখতে পাবেন:<input type="text" onclick="document.execCommand('selectall',null,false);" />

— পাইপাইপার

হ্যাঁ, এই ধরণের কাজটি করা আমার প্রিয় উপায় sp এটি contenteditableউপাদান হিসাবে কাজ করে। আমি মনে করি আপনি এটিকে আরও কিছুটা মার্জিতও বানাতে পারেন, যেমন <input type="text" onfocus="document.execCommand('selectall')">- আপনি নিশ্চিত যে আপনি এটি অপসারণ করতে পারেন nullএবং falseযদি আপনি সেগুলি ব্যবহার না করেন তবে।

— টোস্ট্রাকেনিগমা

হ্যাঁ। onfocusচেয়ে ভাল মনে হয় onclick। এবং হ্যাঁ, এক সঙ্গে দূরে কি করতে পারেন nullএবং false। ধন্যবাদ!

— পাইপ পাইপার

আমি সম্মত হব যে এই সতর্কতার সাথে এটিই সেরা ক্রস ব্রাউজার সমাধান যা @ কোরি হাউস সমাধানে উল্লিখিত সময়সীমাটি এই ক্রস ব্রাউজারটিকে সামঞ্জস্যপূর্ণ করতে ব্যবহার করা উচিত।

— এরিক ইজারা

যখন ব্যবহার করা onfocusহয় তখন Chrome এ ইনপুট ক্লিক করা হলে পুরো পৃষ্ঠাটি নির্বাচন করা হয়। onclickঠিকভাবে কাজ করে.

— রোবটিক

Answer 8

অনফোকাস ইভেন্ট সহ ইনপুট অটোফোকাস:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

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

Answer 9

দ্রষ্টব্য: আপনি যখন বিবেচনা করবেন onclick="this.select()", প্রথম ক্লিকে সমস্ত অক্ষর নির্বাচন করা হবে, এর পরে আপনি ইনপুটতে কিছু সম্পাদনা করতে চান এবং আবার অক্ষরের মধ্যে ক্লিক করতে চান তবে এটি আবার সমস্ত অক্ষর নির্বাচন করবে। এই সমস্যাটি সমাধান করার জন্য আপনার onfocusপরিবর্তে ব্যবহার করা উচিত onclick।

Answer 10

প্রকৃতপক্ষে, ব্যবহার করুন onclick="this.select();"তবে এটির সাথে একত্রিত না হওয়ার কথা মনে রাখবেন disabled="disabled"- এটি তখন কাজ করবে না এবং আপনাকে এখনও নির্বাচন করতে ম্যানুয়ালি বা মাল্টি-ক্লিক করতে হবে। আপনি যদি নির্বাচিত বিষয়বস্তুটির মান লক করতে চান তবে বৈশিষ্ট্যের সাথে একত্রিত করুন readonly।

Answer 11

শোবনের উত্তরের পুনরায় ব্যবহারযোগ্য সংস্করণটি এখানে:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

আপনি একাধিক উপাদান জন্য পরিষ্কার স্ক্রিপ্ট পুনরায় ব্যবহার করতে পারেন।

Answer 12

আপনি প্রতিস্থাপন করতে পারেন

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

সঙ্গে:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

স্থানধারকটি মান প্রতিস্থাপন করতে ব্যবহার করা হয় আপনি কীভাবে চান যে লোকেরা একাধিকবার ক্লিক না করে বা সিটিআরএল + এ ব্যবহার না করে পাঠ্য বাক্সে টাইপ করতে সক্ষম হবে। স্থানধারক এটি তৈরি করে তাই এটি কোনও মান নয় তবে নাম যেমন কোনও স্থান ধারককে প্রস্তাব দেয়। একাধিক অনলাইন ফর্মগুলিতে এটি ব্যবহার করা হয় যা "এখানে ব্যবহারকারীর নাম" বা "ইমেল" বলে এবং আপনি যখন এটিতে ক্লিক করেন "ইমেল" অদৃশ্য হয়ে যায় এবং আপনি এখনই টাইপ করা শুরু করতে পারেন।

Answer 13

আপনি যা চেয়েছিলেন তার সঠিক সমাধানটি হ'ল:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

তবে আমি মনে করি, আপনি "দয়া করে ব্যবহারকারী আইডি লিখুন" স্থানধারক হিসাবে বা ইনপুটটিতে ইঙ্গিতটি দেখানোর চেষ্টা করছেন । সুতরাং, আপনি আরও কার্যকর সমাধান হিসাবে নিম্নলিখিতটি ব্যবহার করতে পারেন:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Answer 14

প্রতিক্রিয়াটির এখানে একটি উদাহরণ রয়েছে তবে ভ্যানিলা জেএস-এ jQuery এ অনুবাদ করা যেতে পারে যদি আপনি পছন্দ করেন:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

এখানে কৌশলটি ব্যবহার করা onMouseDownকারণ উপাদানটি "ক্লিক" ইভেন্টের আগুনের সময় ইতিমধ্যে ফোকাস পেয়েছে (এবং এভাবে theactiveElement চেকটি ব্যর্থ হবে)।

দ্য activeElementচেক প্রয়োজনীয়, যাতে তারা ব্যবহারকারী তাদের কার্সার যেখানে তারা ক্রমাগত সমগ্র ইনপুট পুনরায় নির্বাচন ছাড়া চান অবস্থান করতে পারবেন।

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

এবং সবশেষে, প্রতিক্রিয়াতেel = ev.currentTarget প্রয়োজনীয় কারণ প্রতিক্রিয়া ইভেন্ট অবজেক্টগুলিকে পুনরায় ব্যবহার করে এবং আপনি সেটটাইমআউট শুরু হওয়ার পরে সিন্থেটিক ইভেন্টটি হারাবেন।

Comments

নতুন jQuery প্রতিক্রিয়া হয়?

— vpzomtrrfrt

@vpzomtrrfrt শিওর হ'ল: ডিজে / কে। আমি এটি প্রতিক্রিয়াতে লিখেছিলাম এবং আমি কিছু কিছু SO পয়েন্টের জন্য এটি প্রতিক্রিয়া জানাতে চাই নি। এটি নিন বা এটিকে ছেড়ে দিন :-)

— এমপিএন

প্রতিক্রিয়াতে এটি কীভাবে উদাহরণ ?! এটি নেটিভ জাভাস্ক্রিপ্টে আরও উদাহরণ is

— সিজার

Answer 15

ক্লিক ইভেন্টটি ধরার সমস্যাটি হ'ল পাঠ্যের অভ্যন্তরে প্রতিটি পরবর্তী ক্লিক এটিকে আবার নির্বাচন করবে, যেখানে ব্যবহারকারী সম্ভবত কার্সারটি পুনঃস্থাপনের প্রত্যাশা করছিলেন।

আমার জন্য যা কাজ করেছে তা একটি ভেরিয়েবল, অনুসন্ধান অনুসন্ধানটেক্সটঅনক্লিককে ঘোষণা করে এবং এটি ডিফল্টরূপে সত্যে সেট করা ছিল। ক্লিক হ্যান্ডলার পরীক্ষা করে যে ভেরিয়েবলটি এখনও সত্য: এটি যদি এটি হয় তবে এটি এটি মিথ্যাতে সেট করে এবং নির্বাচন () নির্বাচন করে। আমার তখন একটি অস্পষ্ট ইভেন্ট হ্যান্ডলার রয়েছে যা এটিকে আবার সত্যে সেট করে।

ফলাফলগুলি এখন পর্যন্ত এমন আচরণের মতো মনে হচ্ছে যা আমি প্রত্যাশা করতাম।

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

Answer 16

এই নির্বাচনের জন্য যখন বিকল্পগুলি রয়েছে যখন সিলেক্ট () মোবাইল প্ল্যাটফর্মগুলিতে কাজ করছে না: আইওএস ডিভাইসগুলিতে একটি ইনপুট ক্ষেত্রে প্রোগ্রামক্রমে পাঠ্য নির্বাচন করা (মোবাইল সাফারি)

Answer 17

এইচটিএমএল ভালো লেগেছে <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

এবং বাঁধা ছাড়া জাভাস্ক্রিপ্ট কোড

function textSelector(ele){
    $(ele).select();
}

Comments

"জাভাস্ক্রিপ্ট:" শুধুমাত্র href ব্যবহার করা হয়, এবং এড়ানো উচিত।

— ব্যবহারকারী 1133275

Answer 18

ভাল এটি একটি পাঠ্যবক্সের জন্য স্বাভাবিক কার্যকলাপ।

1 ক্লিক করুন - ফোকাস সেট করুন

2/3 ক্লিক করুন (ডাবল ক্লিক করুন) - পাঠ্য নির্বাচন করুন

পৃষ্ঠার প্রথমটি যখন কোনও একক ডাবল-ক্লিক ইভেন্টে "নির্বাচন" হ্রাস করতে লোড হয় তখন আপনি টেক্সটবক্সে ফোকাস সেট করতে পারেন ।

Comments

শব্দ ক্লিকের জন্য 2 টি এবং লাইন নির্বাচনের জন্য 3 টি ক্লিক করা হয়।

— আর্থার

Answer 19

আপনার ইনপুট ক্ষেত্রে "মান" এর পরিবর্তে "স্থানধারক" ব্যবহার করুন।

Answer 20

আপনি যদি AngularJS ব্যবহার করে থাকেন তবে সহজে অ্যাক্সেসের জন্য আপনি একটি কাস্টম নির্দেশিকা ব্যবহার করতে পারেন:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

এখন কেউ এটির মতো এটি ব্যবহার করতে পারে:

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

নমুনা প্রয়োজনীয়js সহ - তাই অন্য কিছু ব্যবহার করে প্রথম এবং শেষ লাইনটি এড়িয়ে যেতে পারে।

Answer 21

যদি কেউ পৃষ্ঠায় লোড ডাব্লু / জেকিউয়ারি (সন্ধানের ক্ষেত্রগুলির জন্য মিষ্টি) করতে চান তবে এটি আমার সমাধান

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

এই পোস্টের উপর ভিত্তি করে । সিএসএস- ট্রিক্স ডট কমকে ধন্যবাদ

Answer 22

আপনি যদি কেবল প্লেসহোল্ডার পাঠ্যের জন্য চেষ্টা করছেন যা কোনও ব্যবহারকারী উপাদান নির্বাচন করলে প্রতিস্থাপন হয় তবে placeholderআজকাল অ্যাট্রিবিউটটি ব্যবহার করা স্পষ্টতই সেরা অনুশীলন । যাইহোক, যদি ক্ষেত্র ফোকাস অর্জন করে আপনি যদি বর্তমান মানটি নির্বাচন করতে চান তবে @ কোরি হাউস এবং @ টোস্ট্রাকেনিগমা উত্তরগুলির সংমিশ্রণটি সর্বাধিক আধ্যাত্মিক বলে মনে হয়। হ্যান্ডলারের সাথে ব্যবহার focusএবং focusoutইভেন্টগুলি যা বর্তমান ফোকাস উপাদানটিকে সেট করে / প্রকাশ করে এবং মনোযোগ দেওয়ার সময় সমস্ত নির্বাচন করে select একটি কৌণিক 2 / টাইপস্ক্রিপ্ট উদাহরণ নিম্নরূপ (তবে ভ্যানিলা জেএস তে রূপান্তর করতে তুচ্ছ হবে):

টেমপ্লেট:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

উপাদান:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};