क्लिक करने पर HTML टेक्स्ट इनपुट में सभी टेक्स्ट का चयन करना

Question

HTML वेबपेज में टेक्स्टबॉक्स प्रदर्शित करने के लिए मेरे पास निम्नलिखित कोड है।

<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 परियोजना में काम कर रहे हैं तो एक प्लेसहोल्डर का उपयोग करें।

— Léo Lam

प्लेसहोल्डर = "कृपया उपयोगकर्ता आईडी दर्ज करें"

— मार्सेलो बोनस

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एक तर्क के रूप में पारित कर सकते हैं।

— असद सईद्दुद्दीन

मोबाइल सफारी पर जो काम नहीं करता है। इसके बजाय इस .setSelectionRange (0, 9999) को कॉल करने का प्रयास करें।

— डीन रैडक्लिफ

@DeanRadcliffe अच्छा लगा! मैं this.setSelectionRange(0, this.value.length)इसके बजाय का उपयोग करेंगे ।

— ग्रिट

मुझे इनलाइन स्क्रिप्टिंग से क्यों बचना चाहिए?

— इयूलियन ओनोफ्रेई

ब्राउज़र समर्थन पर कोई अद्यतन? w3schools.com/jsref/met_text_select.asp का दावा है कि यह सभी ब्राउज़रों द्वारा समर्थित है

— अय्याश

Answer 2

पहले से पोस्ट किए गए समाधानों में दो क्वर्क हैं:

1. क्रोम में .select () के माध्यम से चयन छड़ी नहीं है - एक मामूली मध्यांतर जोड़ने से यह समस्या हल हो जाती है।
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;})

— Tamlyn

का समय समाप्त 0क्रोम और फ़ायरफ़ॉक्स में मेरे लिए काम करता है। निश्चित नहीं है कि आपका टाइमआउट कहां 50से आ रहा है।

— thejoshwolfe

समाधान onFocus के बजाय onClick का उपयोग करना है। पूरी तरह से काम करता है और जटिल कोड की आवश्यकता नहीं है।

— इस्माइल

@CoryHouse यह कोई फर्क नहीं पड़ता, क्योंकि टैब के माध्यम से फोकस मूल रूप से पाठ का चयन करें! कोई जावास्क्रिप्ट की आवश्यकता है।

— इस्माइल

@CoryHouse 4 साल बाद भी आपके कोड एक आकर्षण की तरह काम करता है। यार, एक धनुष ले लो। इस छोटे से गंदे हैक के लिए धन्यवाद। मैं 2-3 दिनों से खोज रहा था जब तक मुझे यह नहीं मिला। : +1:

— रुतविज कोठारी

Answer 3

Html (आपको पृष्ठ पर काम करने के लिए हर इनपुट पर ऑन्कलिक विशेषता डालनी होगी)

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

या एक बेहतर विकल्प

jQuery (यह पृष्ठ पर प्रत्येक पाठ इनपुट के लिए काम करेगा, अपने HTML को बदलने की कोई आवश्यकता नहीं है):

<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

संभवतः फ़ार्म तत्वों के माध्यम से टैब करने वालों के लिए क्लिक करने के बजाय फ़ोकस इवेंट में बाँधना बेहतर होगा।

— एंड्रयू एनस्ले

@ और यह आवश्यक नहीं है क्योंकि यदि आप इनपुट तत्वों के माध्यम से टैब करते हैं तो पाठ हमेशा चुना जाता है। ;-)

— नीटऑनफिर

फ़ोकस ईवेंट ग्लॉसी हैं, दूसरी ओर ब्लर ईवेंट, सत्यापन को ट्रिगर करने और फ़ॉर्म को स्वतः सहेजने के काम में आता है, जब आप टैब के माध्यम से भी काम करते हैं!

— oLinkWebDevelopment

ठीक काम करना चाहिए, सुनिश्चित करें कि आप jQuery के अद्यतन संस्करण का उपयोग कर रहे हैं, या पुराने संस्करणों पर $ (दस्तावेज़) .live () का उपयोग करें।

— oLinkWebDevelopment

जब तक कि उपयोगकर्ता के पास पहले से ही jQuery का एक बेहतर विकल्प नहीं है, तब तक किसी तीसरे पक्ष के पुस्तकालय पर निर्भरता को जोड़ना शामिल नहीं है।

— रोस

Answer 4

मुझे पता है कि यह पुराना है, लेकिन सबसे अच्छा विकल्प अब placeholderसंभव हो तो नई HTML विशेषता का उपयोग करें :

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

यह पाठ को तब तक दिखाने का कारण होगा जब तक कि मूल्य दर्ज नहीं किया जाता है, पाठ या स्पष्ट आदानों का चयन करने की आवश्यकता को समाप्त करता है।

Comments

कृपया ध्यान दें कि प्लेसहोल्डर को केवल doctype html के साथ अनुमति दी गई है।

— dogawaf 11

Answer 5

सूचीबद्ध उत्तर मेरे अनुसार आंशिक हैं। मैंने कोणीय में और JQuery के साथ ऐसा करने के दो उदाहरणों के नीचे लिंक किया है।

इस समाधान में निम्नलिखित विशेषताएं हैं:

• JQuery, सफारी, क्रोम, IE, फ़ायरफ़ॉक्स, आदि का समर्थन करने वाले सभी ब्राउज़रों के लिए काम करता है।
• Phonegap / कॉर्डोवा के लिए काम करता है: Android और IOs।
• केवल इनपुट के बाद सभी का चयन करता है जब तक कि अगले कलंक तक ध्यान केंद्रित न हो जाए और फिर ध्यान केंद्रित करें
• एकाधिक इनपुट का उपयोग किया जा सकता है और यह बाहर गड़बड़ नहीं करता है।
• कोणीय निर्देशन में महान पुन: उपयोग होता है बस निर्देशात्मक चयन-ऑल-ऑन-क्लिक जोड़ें
• 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;
      });
    }
  };
}]);

Comments

अच्छा angularjs समाधान। धन्यवाद। हालाँकि मैं hasSelectedAll ध्वज का उपयोग नहीं करता। मुझे लगता है कि यह एक दूसरे क्लिक के लिए एक प्रावधान है जिसका मतलब है कि उपयोगकर्ता कर्सर रखना चाहता है।

— डेवड

Answer 6

प्रयत्न:

onclick="this.select()"

यह मेरे लिए बहुत अच्छा काम करता है।

Answer 7

आप हमेशा उपयोग कर सकते हैं document.execCommand( सभी प्रमुख ब्राउज़रों में समर्थित )

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

वर्तमान में केंद्रित तत्व में सभी पाठ का चयन करता है।

Comments

यह एक सुरुचिपूर्ण समाधान प्रतीत होता है। पूरा कोड इस तरह दिखाई देगा:<input type="text" onclick="document.execCommand('selectall',null,false);" />

— pipepiper 10

हाँ, यह इस तरह का कार्य करने के लिए मेरा पसंदीदा तरीका है, esp। यह contenteditableतत्वों के लिए भी काम करता है । मुझे लगता है कि आप इसे और भी अधिक सुरुचिपूर्ण बना सकते हैं, यानी <input type="text" onfocus="document.execCommand('selectall')">- बहुत यकीन है कि आप इसे हटा सकते हैं nullऔर falseयदि आप उनका उपयोग नहीं करते हैं।

— toastrackenigma

हाँ। onfocusसे बेहतर लगता है onclick। और हाँ, एक के साथ दूर कर सकते हैं nullऔर false। धन्यवाद!

— पाइपपाइपर

मैं इस बात से सहमत हूं कि यह कैविएट के साथ सबसे अच्छा क्रॉस-ब्राउज़र समाधान है जो @ क्रॉस होम समाधान में उल्लिखित टाइमआउट का उपयोग इस क्रॉस ब्राउज़र को संगत बनाने के लिए किया जाना चाहिए।

— एरिक लीज

उपयोग करते समय onfocus, क्रोम में इनपुट पर क्लिक करने पर पूरा पृष्ठ चुना जाता है। 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" />

प्लेसहोल्डर का उपयोग मूल्य को बदलने के लिए किया जाता है कि आप कैसे चाहते थे कि लोग कई बार क्लिक करें या ctrl + a का उपयोग किए बिना टेक्स्ट बॉक्स में टाइप कर सकें। प्लेसहोल्डर इसे बनाता है इसलिए यह एक मूल्य नहीं है, लेकिन जैसा कि नाम से पता चलता है कि यह एक स्थान धारक है। यही वह कई ऑनलाइन रूपों में उपयोग किया जाता है जो "उपयोगकर्ता नाम यहां" या "ईमेल" कहते हैं और जब आप उस पर क्लिक करते हैं तो "ईमेल" गायब हो जाता है और आप तुरंत टाइप करना शुरू कर सकते हैं।

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क्योंकि तत्व पहले ही "क्लिक" इवेंट फायर (और इस प्रकार activeElementचेक विफल हो जाएगा) तक ध्यान केंद्रित कर चुका है ।

activeElementजांच आवश्यक है ताकि वे उपयोगकर्ता अपने कर्सर जहां वे लगातार पूरे इनपुट का पुन: चयन के बिना चाहते रख सकते हैं।

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

और अंत में, React मेंel = ev.currentTarget आवश्यक है क्योंकि React ईवेंट ऑब्जेक्ट्स का पुन: उपयोग करता है और आप उस समय तक सिंथेटिक ईवेंट को खो देंगे जब तक कि सेट टाइमआउट नहीं हो जाता।

Comments

क्या नया jQuery है?

— vpzomtrrfrt

@vpzomtrrfrt श्योर है: डीजे / के। मैंने इसे React में लिखा था और मैं इसे कुछ SO पॉइंट्स के लिए un-React करने के बारे में नहीं था। इसे ले लो या इसे छोड़ दें :-)

— एमपीएन

यह कैसे प्रतिक्रिया में एक उदाहरण है? यह देशी जावास्क्रिप्ट में एक उदाहरण है।

— सीजर

Answer 15

क्लिक इवेंट को पकड़ने में समस्या यह है कि पाठ के भीतर प्रत्येक क्लिक पर इसे फिर से चुना जाएगा, जबकि उपयोगकर्ता संभवतः कर्सर को पुन: भेजने की उम्मीद कर रहा था।

मेरे लिए जो काम किया गया वह एक चर, selectSearchTextOnClick की घोषणा कर रहा था, और इसे डिफ़ॉल्ट रूप से सच करने के लिए सेट कर रहा था। क्लिक हैंडलर यह जाँचता है कि चर अभी भी सही है: यदि यह है, तो यह इसे गलत पर सेट करता है और चयन () करता है। मेरे पास एक ब्लर ईवेंट हैंडलर है जो इसे सच में वापस सेट करता है।

अब तक के परिणामों से ऐसा लगता है कि मैं उस व्यवहार की उम्मीद करूंगा।

(संपादित करें: मैंने यह कहने की उपेक्षा की कि मैंने फोकस इवेंट को पकड़ने की कोशिश की थी जैसा कि किसी ने सुझाव दिया था, लेकिन यह काम नहीं करता है: फोकस इवेंट में आग लगने के बाद, क्लिक करने पर ईवेंट आग लग सकती है, पाठ को तुरंत हटा दें।

Answer 16

इस प्रश्न के पास विकल्प हैं कि कब .select () मोबाइल प्लेटफ़ॉर्म पर काम नहीं कर रहा है: iOS उपकरणों (मोबाइल सफारी) पर इनपुट फ़ील्ड में पाठ का चयन करना

Answer 17

इस तरह से एच.टी.एम.एल. <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

और बिना किसी बंधन के जावास्क्रिप्ट कोड

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

Comments

"जावास्क्रिप्ट:" का उपयोग केवल href में किया जाता है, और इससे बचा जाना चाहिए।

— user1133275

Answer 18

वैसे यह एक TextBox के लिए सामान्य गतिविधि है।

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

नमूना आवश्यकता के साथ है - इसलिए पहली और आखिरी पंक्ति को कुछ और उपयोग करने पर छोड़ दिया जा सकता है।

Answer 21

अगर कोई पृष्ठ लोड 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);

इस पोस्ट के आधार पर CSS-Tricks.com को धन्यवाद

Answer 22

यदि आप बस प्लेसहोल्डर टेक्स्ट को रखने की कोशिश कर रहे हैं जो उपयोगकर्ता द्वारा तत्व का चयन करने पर प्रतिस्थापित हो जाता है तो जाहिर है कि placeholderआजकल विशेषता का उपयोग करना सबसे अच्छा अभ्यास है। हालाँकि, यदि आप किसी फ़ील्ड के फ़ोकस होने पर वर्तमान मूल्य का चयन करना चाहते हैं तो @Cory House और @Toastrackenigma उत्तरों का संयोजन सबसे अधिक विहित प्रतीत होता है। का उपयोग करें focusऔरfocusoutहैंडलर के साथ घटनाओं, जो वर्तमान फोकस तत्व को सेट / रिलीज करते हैं, और फोकस होने पर सभी का चयन करें। एक कोणीय 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); });
};