javascript - এইচ - html কোড কি



ক্লিক করার সময় এইচটিএমএল টেক্সট ইনপুট সব লেখা নির্বাচন (15)

আমি একটি HTML ওয়েব পেজে একটি টেক্সটবক্স প্রদর্শন নিম্নলিখিত কোড আছে।

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

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

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

সম্পাদনা:

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


Answer #1

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


Answer #2

আপনি 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 ... />

নমুনা requjs সঙ্গে হয় - তাই অন্য কিছু ব্যবহার করে যদি প্রথম এবং শেষ লাইন বাদ দেওয়া যেতে পারে।


Answer #3

আপনি কি জিজ্ঞাসা সঠিক সমাধান হল:

<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 #4

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

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

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



Answer #6

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

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

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



Answer #8

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

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

Answer #9

এখানে প্রতিক্রিয়া একটি উদাহরণ, কিন্তু আপনি পছন্দ যদি ভ্যানিলা জেএস এ 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 ব্যবহার করা onMouseDown কারণ উপাদানটি "ক্লিক করুন" ইভেন্টটি আগুনের দ্বারা ফোকাস পেয়েছে (এবং এইভাবে activeElement চেক ব্যর্থ হবে)।

activeElement চেক প্রয়োজন যাতে ব্যবহারকারীরা তাদের কার্সারটি স্থির করতে পারে যেখানে তারা সর্বদা সম্পূর্ণ ইনপুট পুনরায় নির্বাচন না করেই চায়।

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

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


Answer #10

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

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

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

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


Answer #11

চেষ্টা করুন:

onclick="this.select()"

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


Answer #12

তালিকাভুক্ত উত্তর আমার অনুযায়ী আংশিক হয়। আমি Angular এবং JQuery এ কীভাবে এটি করতে পারি তার দুটি উদাহরণ নীচে লিঙ্ক করেছি।

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

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

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("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=preview

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

Answer #13

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


Answer #14

যে কেউ পাতা লোড w / jQuery (অনুসন্ধান ক্ষেত্রের জন্য মিষ্টি) এই কাজ করতে চান তাহলে এখানে আমার সমাধান

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

this পোস্টের উপর ভিত্তি করে। ধন্যবাদ ধন্যবাদ CSS-Tricks.com


Answer #15

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





textinput