पाठ बॉक्स की सभी सामग्री का चयन करें जब वह फ़ोकस प्राप्त करे (वेनिला JS या jQuery)

310

एक वेनिला जेएस या jQuery समाधान क्या है जो टेक्स्टबॉक्स के सभी सामग्रियों का चयन करेगा जब टेक्स्टबॉक्स फोकस प्राप्त करता है?

javascript  jquery  user-interface 
— जॉन एरिकसन
स्रोत
— gdoron
3
@gdoron किसी कारण से जो इस प्रश्न को अपने आप लिंक करता है।
— डेस्टिनेटर
— gdoron मोनिका
इनमें से अधिकांश समाधानों के साथ समस्या यह है कि वे इनपुट फ़ील्ड के भीतर कर्सर की स्थिति को बदलते समय सही ढंग से काम नहीं करते हैं। मेरे जवाब पर एक नज़र डालें: stackoverflow.com/a/20826207/641452
— कॉलिन ब्रीम

जवाबों:

369 
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});
— जॉन शेहान
स्रोत
23
इसके अलावा सिर्फ अतिरिक्त जानकारी के लिए: "इनपुट [टाइप = टेक्स्ट]" अब "इनपुट: टेक्स्ट" हो सकता है
— रिकार्डो वेगा
8
यह क्रोम पर मेरे लिए काम नहीं करता है और jQuery वेबसाइट का कहना है कि यह ब्राउज़र पर निर्भर है। क्या कोई और सत्यापित कर सकता है?
— केनी वायलैंड
71
ऐसा लगता है कि WebKit ब्राउज़र माउसअप घटना के कारण इसमें हस्तक्षेप करते हैं। मैंने इसे जोड़ा और यह काम किया: $ ('इनपुट: टेक्स्ट')। माउसअप (फ़ंक्शन (ई) {रिटर्न झूठा;});
— केनी वायलैंड
5
केनी सही है, लेकिन दुर्भाग्य से 'माउसअप' क्रोम स्पिनर नियंत्रण को भी प्रभावित करता है। 'फोकस' के बजाय 'क्लिक' को ट्रिगर करना हल करने के लिए लगता है
— रिचर्ड केनेड सेप
24
मैं इस तरह का उपयोग करता हूं: $ ("इनपुट: पाठ"); चयन करें ()। फ़ोकस ();
— फुओंग
227 

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />
स्निपेट का विस्तार करें

— ज़ैक
स्रोत
43
+ onmouseup = क्लिक पर डिसेलेक्ट को रोकने के लिए "वापसी झूठी"
— एंथनी जॉनसन
2
+1 माउसअप के लिए किसी प्रकार के रोक के लिए, या यह मज़बूती से काम नहीं करता है। ऐसा करने के नकारात्मक पक्ष यह है कि एक बार कर्सर क्षेत्र में होने के बाद, कर्सर को स्थिति में लाने के लिए चयनित पाठ के भीतर कहीं क्लिक करके काम नहीं करता है; क्लिक प्रभावी रूप से अक्षम हैं। फिर भी, उन स्थितियों के लिए जहां फोकस पर पूरे पाठ का चयन करना वांछनीय है, संभवतः यह दो बुराइयों से कम है।
— संवर्धन
मैं onMouseDown इवेंट के दौरान, यदि यह गलत है, तो मैं कुछ हद तक इस मुद्दे को उठा सकता हूँ। फिर, onMouseUp के दौरान, doMouseUp को सही पर रीसेट करें और रीसेट करने से पहले doMouseUp मान लौटाएं। यह जटिल हो रहा है और कोड की आवश्यकता है - मैं इसे बेहतर समझाते हुए उत्तर पोस्ट करूंगा।
— ट्रैविस
1
onmouseup="return false;"यदि आप चाहते हैं कि उपयोगकर्ता टेक्स्ट बॉक्स के अंदर ध्यान केंद्रित करने के बाद पाठ का स्वतंत्र रूप से चयन करने और संपादित करने में सक्षम न हो तो उसे न जोड़ें । इस कोड के साथ, पाठ को "सभी का चयन करें" स्थिति में बंद कर दिया जाएगा और उपयोगकर्ता इसे तब तक संपादित नहीं कर सकेगा जब तक उपयोगकर्ता किसी नए पाठ में टाइप नहीं करता है या तीर कुंजी का उपयोग करता है। ईमानदारी से यह एक बहुत ही अजीब व्यवहार लगता है और इससे कोई मतलब नहीं होगा जब तक कि टेक्स्टबॉक्स स्थायी रूप से गैर-संपादन योग्य नहीं है (और अक्षम है)।
— ADTC
1
तकनीकी रूप से, आपको जरूरत नहीं है onmouseup="return false;"कि आप केवल चयन करना चाहते हैं जब उपयोगकर्ता पहले क्लिक या टैब पर आए । और वेनिला जावास्क्रिप्ट के लिए +1!
— ४५
39 
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});
— योगेश अग्रवाल
स्रोत
1
यह अच्छा है। धन्यवाद! ज़ैच के उत्तर में संशोधन द्वारा टिप्पणी mouseupघटना के डिफ़ॉल्ट को रोकने का एक नकारात्मक पहलू देती है : "एक बार जब कर्सर फ़ील्ड में होता है, तो कर्सर को काम नहीं करने के लिए चयनित पाठ के भीतर कहीं पर क्लिक करने से काम नहीं होता है; क्लिक प्रभावी रूप से अक्षम हो जाते हैं। फिर भी, के लिए। ऐसे हालात जहां फोकस पर पूरे पाठ का चयन करना वांछनीय है, संभवतः यह दो बुराइयों से कम है। "
— जॉनके
25

jQuery जावास्क्रिप्ट नहीं है जो कुछ मामलों में उपयोग करना अधिक आसान है।

इस उदाहरण को देखें:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

स्रोत: सीएसएस ट्रिक्स , एमडीएन

— aaa
स्रोत
7
शायद यह ठीक है अगर आपको अपने मार्कअप और कोड को मिलाने में कोई आपत्ति नहीं है; आजकल ज्यादातर लोग अपनी स्क्रिप्ट को 'विनीत' रखने की कोशिश करते हैं। ओह ... और jQuery है जावास्क्रिप्ट।
— एंड्रयू नाई
2
Onclick के सुझाव के लिए धन्यवाद, महान काम करता है। हर कोई दूसरे विकल्प को देखने के लिए खुशी से jQuery का उपयोग नहीं करता है।
— लुकास
इस मान लिया गया है उपयोगकर्ताओं को केवल माउस का उपयोग करें
— pcnate
onfocus = "this.focus (); this.select ()" कीबोर्ड के लिए उपयोग कर सकते हैं
— मुहम्मद नदीम
21

यह केवल एक क्रोम / सफारी मुद्दा नहीं है, मैंने फ़ायरफ़ॉक्स 18.0.1 के साथ काफी समान व्यवहार का अनुभव किया। मज़ेदार बात यह है कि MSIE पर ऐसा नहीं होता है! यहां समस्या पहली माउसअप घटना है जो इनपुट सामग्री को अचयनित करने के लिए मजबूर करती है, इसलिए केवल पहली घटना को अनदेखा करें।

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

टाइमऑट दृष्टिकोण एक अजीब व्यवहार का कारण बनता है, और हर माउसअप घटना को अवरुद्ध करके आप इनपुट तत्व पर फिर से चयन को हटा नहीं सकते हैं।

— Cizar
स्रोत
1
एक माउसअप को रोकने के लिए एक के उपयोग के लिए +1। मुझे वास्तव में नापसंद था कि प्रारंभिक क्लिक के बाद माउस के साथ पाठ का चयन न कर पाना।
— Pluc
13

HTML: 

Enter Your Text : <input type="text" id="text-filed" value="test">

JS का उपयोग करना:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

JQuery का उपयोग:

$("#text-filed").focus(function() { $(this).select(); } );

रिएक्ट JS का उपयोग करना:

संबंधित घटक में रेंडर फ़ंक्शन के अंदर -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>
— अनिरुद्ध शेवले
स्रोत
2
यह मेरे लिए रिएक्ट में काम करता है:onFocus={(e) => e.target.select()}
— पाइटो
11

मेरा समाधान टाइमआउट का उपयोग करना है। ठीक काम करने लगता है

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});
— जेमी पटे
स्रोत
यह वह उपाय है जो मैं उपयोग करता हूं और पसंद करता हूं। मैं 0 के टाइमआउट मान का उपयोग करता हूं क्योंकि इससे वर्तमान ईवेंट कतार के अंत में जोड़ दिया जाएगा, जिसका अर्थ है कि यह "माउसअप" इवेंट के बाद चलेगा।
— डेविड एमएम
4

मुझे पता है कि इनलाइन कोड खराब शैली है, लेकिन मैं इसे एक .js फ़ाइल में नहीं डालना चाहता था। JQuery के बिना काम करता है!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>
— user3296743
स्रोत
3

यहां जवाबों ने मुझे एक बिंदु तक लाने में मदद की, लेकिन मुझे क्रोम में अप / डाउन बटन पर क्लिक करने पर एचटीएमएल 5 नंबर इनपुट फ़ील्ड में एक समस्या थी।

यदि आप बटनों में से किसी एक पर क्लिक करते हैं, और माउस को बटन के ऊपर छोड़ देते हैं तो संख्या बदल जाती है जैसे कि आप माउस बटन को पकड़ रहे थे क्योंकि माउसअप को फेंक दिया जा रहा था।

जैसे ही इसे नीचे ट्रिगर किया गया, मैंने माउसअप हैंडलर को हटाकर इसे हल कर दिया:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

आशा है कि यह भविष्य में लोगों की मदद करेगा ...

— H2Os
स्रोत
Nopes। आप स्व-निर्मित समस्या का समाधान दे रहे हैं। यदि आप उत्तर को ठीक से देखते हैं, तो वे केवल टेक्स्ट इनपुट फ़ील्ड के mouseupलिए बाध्य हैं और एस नहीं । यह समस्या इसलिए नहीं आनी चाहिएnumber
— ओम शंकर
बाइंडिंग माउसअप के साथ समस्या यह है कि यह क्षेत्र के भीतर कर्सर ले जाने पर हस्तक्षेप करता है। यह एक बेहतर समाधान है, लेकिन यदि आप फ़ील्ड में टैब करते हैं, तो अगला मूसडाउन खो जाएगा (और उपयोगकर्ता माउस के साथ कर्सर को स्थानांतरित करने में सक्षम नहीं होगा)। कि सभी मूसडाउन खोने से बेहतर है!
— कॉलिन ब्रीम
3

यह काम करेगा, यह कोशिश करो - 

<input id="textField1" onfocus="this.select()" onmouseup="return false" />

सफारी / IE 9 और क्रोम में काम करता है, मुझे फ़ायरफ़ॉक्स में परीक्षण करने का मौका नहीं मिला।

— आदित्य कुमारंचथ
स्रोत
3

मुझे पता है कि यहाँ पहले से ही बहुत सारे उत्तर हैं - लेकिन यह अब तक गायब है; एक समाधान जो अजाक्स जनित सामग्री के साथ भी काम करता है:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});
— low_rents
स्रोत
2

मैं कुछ फ़ंक्शन कॉल को शामिल करके ज़ैच के उत्तर को थोड़ा सुधारने में सक्षम था। उस उत्तर के साथ समस्या यह है कि यह onMouseUp को पूरी तरह से निष्क्रिय कर देता है, जिससे ध्यान केंद्रित होते ही आप टेक्स्टबॉक्स में इधर-उधर क्लिक करने से बच जाते हैं।

यहाँ मेरा कोड है:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

यह Zach के उत्तर पर थोड़ा सुधार है। यह IE में पूरी तरह से काम करता है, क्रोम में बिल्कुल भी काम नहीं करता है, और फायरफॉक्स में वैकल्पिक रूप से सफलता के साथ काम करता है (शाब्दिक रूप से हर दूसरे समय)। अगर किसी को इस बात का अंदाजा है कि इसे एफएफ या क्रोम में विश्वसनीय तरीके से कैसे काम किया जाए, तो कृपया साझा करें।

वैसे भी, मुझे लगा कि मैं इसे एक अच्छा सा बनाने के लिए साझा करूँगा।

— ट्रैविस
स्रोत
आपके कोड में एक त्रुटि है - दूसरी विधि को "टेक्स्टबॉक्समाउसअप" कहा जाना चाहिए। मेरे उत्तर पर एक नज़र डालें जो एक समान दृष्टिकोण का उपयोग करता है।
— कॉलिन ब्रीम
1
यह ध्यान दिया जाना चाहिए कि onMouseUp=""और onMouseDown=""सही w3 मानक नहीं हैं। वे किया जाना चाहिए onmouseup=""और onmousedown=""। अन्य HTML विशेषताओं के साथ, उन्हें ऊंट के मामले में निचले हिस्से में लिखा जाना चाहिए।
— ड्रू
2

@Travis और @Mari की तरह, मैं उपयोगकर्ता द्वारा क्लिक किए जाने पर स्वत: चयन करना चाहता था, जिसका अर्थ है कि किसी mouseupईवेंट के डिफ़ॉल्ट व्यवहार को रोकना, लेकिन उपयोगकर्ता को क्लिक करने से रोकना नहीं है। मैं जिस समाधान के साथ आया था, जो IE11, Chrome 45, ओपेरा 32 और फ़ायरफ़ॉक्स 29 (ये मेरे द्वारा वर्तमान में इंस्टॉल किए गए ब्राउज़र हैं) में काम करता है, एक माउस क्लिक में शामिल घटनाओं के अनुक्रम पर आधारित है।

जब आप एक टेक्स्ट इनपुट पर क्लिक करते हैं जिसमें फोकस नहीं होता है, तो आपको ये ईवेंट मिलते हैं (दूसरों के बीच):

  • mousedown: आपके क्लिक के जवाब में। डिफ़ॉल्ट हैंडलिंग बढ़ जाती हैfocusयदि आवश्यक हो तो है और चयन शुरू हो जाता है।
  • focus: डिफ़ॉल्ट हैंडलिंग के भाग के रूप में mousedown।
  • mouseup: आपके क्लिक का पूरा होना, जिसकी डिफ़ॉल्ट हैंडलिंग चयन का अंत तय करेगी।

जब आप एक टेक्स्ट इनपुट पर क्लिक करते हैं जिसमें पहले से ही फोकस होता है, तो focusईवेंट को छोड़ दिया जाता है। जैसा कि @Travis और @Mari दोनों ने अचरज से देखा, mouseupजरूरतों की डिफ़ॉल्ट हैंडलिंग केवल तभी focusहोती है जब घटना होती है। हालांकि, जैसा कि कोई " focusनहीं हुआ" घटना है, हमें यह पता लगाने की आवश्यकता है, जिसे हम mousedownहैंडलर के भीतर कर सकते हैं ।

@ मारी के समाधान के लिए आवश्यक है कि jQuery आयात किया जाए, जिससे मैं बचना चाहता हूं। @ ट्रैविस समाधान निरीक्षण करके ऐसा करता है document.activeElement। मुझे नहीं पता कि वास्तव में उसका समाधान ब्राउज़रों पर काम क्यों नहीं करता है, लेकिन यह ट्रैक करने का एक और तरीका है कि क्या टेक्स्ट इनपुट में फ़ोकस है: बस इसका अनुसरण करें focusऔरblur घटनाओं ।

यहाँ कोड है कि मेरे लिए काम करता है:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

मुझे उम्मीद है कि यह किसी की मदद है। :-)

— जोनाथन गिल्बर्ट
स्रोत
+1 धन्यवाद, लेकिन इसे फिर से कैसे लिखा जा सकता है ताकि आप स्क्रिप्ट में 'txtCustomer' नियंत्रण को हार्ड-कोड न करें? वहाँ एक 'इस' वस्तु नीचे पारित करने के लिए एक रास्ता है?
— Fandango68
एक तरीका एक पैरामीटर के रूप में पारित किसी भी तत्व के लिए व्यवहार को लागू करने के लिए एक उपयोगिता फ़ंक्शन बनाने के लिए होगा। उस फ़ंक्शन के भीतर, तत्व संदर्भ हार्ड-कोडित होगा - पैरामीटर के लिए। फिर आप इसे किसी भी संख्या में इनपुट तत्वों पर कॉल कर सकते हैं, जो आपके निपटान में आपके पास किसी भी माध्यम से पहचाने जाते हैं। :-)
— जोनाथन गिल्बर्ट
क्षमा करें मैं एक noob हूँ। क्या आप एक उदाहरण के साथ अपना जवाब अपडेट कर सकते हैं? धन्यवाद
— Fandango68
1
बस एक फ़ंक्शन घोषणा में लिखा कोड लपेटें जो "txtCustomer" नामक पैरामीटर लेता है। मैं कुछ और "txtCustomer" का नाम बदलने की सलाह देता हूं, लेकिन यदि आप ऐसा करने में आश्वस्त नहीं हैं, तो यह तकनीकी रूप से "txtCustomer" नाम के चर के साथ काम करेगा। यह कहना है: फ़ंक्शन MakeTextBoxAutoSelect (txtCustomer) { जो मैंने ऊपर लिखा है }
— जोनाथन गिल्बर्ट
1

एक जावास्क्रिप्ट या jQuery समाधान क्या है जो टेक्स्टबॉक्स के सभी सामग्रियों का चयन करेगा जब टेक्स्टबॉक्स फोकस प्राप्त करता है ?

आपको केवल निम्नलिखित विशेषता जोड़ने की आवश्यकता है:

onfocus="this.select()"

उदाहरण के लिए:

<input type="text" value="sometext" onfocus="this.select()">

(ईमानदारी से मुझे कोई सुराग नहीं है कि आपको किसी और चीज की आवश्यकता क्यों होगी।)

— ADTC
स्रोत
1

इसने मेरे लिए काम किया (पोस्टिंग के बाद से यह उत्तर में नहीं है लेकिन एक टिप्पणी में है)

 $("#textBox").focus().select();
— विजय वेपकोमा
स्रोत
0 
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

संपादित करें: प्रति @ डेविडजी के अनुरोध के अनुसार, मैं विवरण प्रदान नहीं कर सकता क्योंकि मुझे यकीन नहीं है कि यह क्यों काम करता है, लेकिन मेरा मानना ​​है कि यह ध्यान केंद्रित करने वाली घटना के ऊपर या नीचे या जो कुछ भी करता है और इनपुट तत्व अधिसूचना प्राप्त करने के साथ कुछ करना है। यह ध्यान केंद्रित है। टाइमआउट सेट करने से तत्व को यह महसूस करने का एक पल मिल जाता है कि उसने ऐसा किया है।

— माइकल ट्रेंचिडा
स्रोत
कृपया कुछ कोड में चिपकाने के बजाय अपना उत्तर स्पष्ट करें।
— डेविड जीएन
0

यदि आप घटनाओं को एक साथ जोड़ते हैं तो मेरा मानना ​​है कि यह .oneइस धागे में कहीं और सुझाए गए उपयोग की आवश्यकता को समाप्त करता है ।

उदाहरण:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});
— DrewT
स्रोत
0

नोट: यदि आप ASP.NET में प्रोग्रामिंग कर रहे हैं, तो आप ScriptManager.RegisterStartupScript C # का उपयोग करके स्क्रिप्ट चला सकते हैं: 

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

या अन्य उत्तरों में सुझाए गए HTML पृष्ठ में केवल स्क्रिप्ट लिखें।

— गाम्बोआ एक्सेल
स्रोत
प्रश्न कहीं भी ASP.NET नहीं है। : |
— मोहम्मद तौफीक
यह सच है, मैंने इसे सिर्फ उस स्थिति में पोस्ट किया है जब प्रोग्रामर ASP.NET का उपयोग कर रहा है। यह फ्रेमवर्क का उपयोग करके उत्तर की तलाश करने वाले किसी व्यक्ति के लिए सहायक हो सकता है (जैसा कि इसने मेरी मदद की)। मैं सिर्फ साझा कर रहा हूं और उम्मीद है कि कोई इसे मददगार पाएगा।
— गमबोआ
जैसे ही प्रोग्रामर ASP.NET का उपयोग कर रहा है, वह प्रश्न में 'asp.net' टैग जोड़ देगा। : |
— मोहम्मद थफीक
0

मैं यह एक बोना जहां कुछ, पूरी तरह से काम!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });
— यानिव
स्रोत
0

मैं पार्टी में देर से आता हूं, लेकिन यह आईई 11, क्रोम, फायरफॉक्स में पूरी तरह से काम करता है, बिना माउसअप के (और JQuery के बिना)।

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});
— गिलौम बी।
स्रोत
हाँ, लेकिन यदि आप focusइस क्षेत्र में टैब करके, आप कई माउसअप इवेंट श्रोताओं को संलग्न करेंगे ...
— सेबस्टियन शोले
-1

मेरा समाधान अगले है:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

इसलिए माउसअप आमतौर पर काम करेगा, लेकिन इनपुट द्वारा ध्यान केंद्रित करने के बाद अचयनित नहीं करेगा

— मारी
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.