जब उपयोगकर्ता इनपुट बॉक्स पर क्लिक करता है तो इनपुट के अंत पर ध्यान केंद्रित करने के लिए, मैं इस तरह कुछ उपयोग करता हूं,

$(function() {
    $('#test-input').on('click', function(evt) {
    $target = $(evt.target);
    var val = $target.val();

    $target.val('').val(val);
  });
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" id="test-input" value="abcdefgh" />

लेकिन अगर मैं 'क्लिक' को 'फोकस' में बदलता हूं, तो यह काम नहीं करता है।

$(function() {
    $('#test-input').on('focus', function(evt) {
    $target = $(evt.target);
    var val = $target.val();

    $target.val('').val(val);
  });
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" id="test-input" value="abcdefgh" />

उस मामले में ऑनक्लिक और ऑनफोकस कार्रवाइयां कितनी भिन्न हैं?

5
Expert wanna be 27 मार्च 2018, 12:40

4 जवाब

सबसे बढ़िया उत्तर

कुछ अंतर हैं:

onClick: जब भी उपयोगकर्ता किसी ऑब्जेक्ट पर क्लिक करता है, जैसे बटन, इमेज, इनपुट... क्लिक करने के बाद, यह ईवेंट सक्रिय हो जाता है:

onFocus: इस घटना को तब सक्रिय किया जाता है जब किसी तत्व का चयन किया जाता है, इसे क्लिक करने की आवश्यकता नहीं होती है, इसे प्रोग्रामेटिक रूप से किया जा सकता है, उदाहरण के लिए .focus() को कॉल करना या टैब कुंजी का उपयोग करना। साथ ही, onclick के बजाय onfocus का उपयोग करने से से बचने में मदद मिल सकती है। बुदबुदाती.

समाप्त करने के लिए, नीचे दिए गए स्निपेट का उपयोग करें (मैंने और इनपुट जोड़े, इसके माध्यम से TAB के साथ साइकिल चलाएं (या क्लिक भी करें), आप देखेंगे कि कैरेट तब तक समाप्त हो जाएगा।
मैंने टाइमआउट क्यों जोड़ा? क्रोम ब्राउज़र में एक अजीब विचित्रता है जहां कर्सर को फ़ील्ड में ले जाने से पहले फ़ोकस ईवेंट सक्रिय हो जाता है, इसलिए, ईवेंट को अंत तक ले जाने से पहले कर्सर को वहां पहुंचने के लिए प्रतीक्षा करनी चाहिए;

$(function() {
  $('.test-input').on('focus', function(evt) {
    that = this;
    setTimeout(function() {
      that.selectionStart = that.selectionEnd = 10000;
    }, 1);
  });
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" class="test-input" value="abcdefgh" />
<input type="text" name="test" class="test-input" value="a1b2c3" />
<input type="text" name="test" class="test-input" value="abcdefghijklmnop" />


अतिरिक्त: यदि आप केवल मोबाइल के लिए प्रोग्रामिंग कर रहे हैं, तो touchEvents (https://developer.mozilla.org/pt-BR/docs/Web/Events/touchstart)

6
Calvin Nunes 22 अप्रैल 2020, 11:46

मुझे लगता है कि इसका इस तथ्य से कोई लेना-देना नहीं है कि क्लिक पर निष्पादित कोड इनपुट पर ध्यान केंद्रित करने और कर्सर की स्थिति को प्रभावित करने से पहले निष्पादित किया जाता है।

दूसरी ओर, जब आप फ़ोकस ईवेंट को सुनते हैं, तो कर्सर की पहले से ही एक स्थिति होती है और वह इस स्थिति में रहता है।

वह शुद्ध व्यक्तिगत सिद्धांत है। हालांकि, अगर आप इसे काम करना चाहते हैं, तो मुझे इस प्रश्न पर क्रोम में काम करने वाला एक अच्छा समाधान मिला: टेक्स्ट इनपुट एलिमेंट में टेक्स्ट के अंत में कर्सर रखने के लिए जावास्क्रिप्ट का उपयोग करें

आपको इनपुट का मान साफ़ करना होगा, एक मिलीसेकंड की प्रतीक्षा करनी होगी, और मान को फिर से लागू करना होगा:

$(function() {
    $('#test-input').on('focus', function(evt) {
      $target = $(evt.target);
      var val = $target.val();
      $target.val('');
      setTimeout(() => {
        $target.val(val)
      },1)
  });
})
0
Hammerbot 27 मार्च 2018, 09:58

मुख्य अंतर फोकस इवेंट कॉल है जब आप इनपुट फ़ील्ड पर ध्यान केंद्रित करेंगे जैसे कि आप टैब बटन का उपयोग करते हैं और इनपुट फ़ील्ड पर ध्यान केंद्रित करते हैं लेकिन क्लिक के मामले में आपको इनपुट फ़ील्ड पर क्लिक करने की आवश्यकता होती है।

0
Pankaj Bisht 27 मार्च 2018, 09:54

जब आप पहली बार टेक्स्टबॉक्स पर क्लिक करते हैं तो यह ठीक काम करना चाहिए। यह तब होता है जब फ़ोकस ईवेंट ट्रिगर होता है, क्योंकि आप वास्तव में आइटम पर 'फ़ोकस' कर रहे होते हैं। तब से, जब तक आप तत्व के बाहर कहीं भी क्लिक नहीं करते हैं, तब तक आपके आइटम पर पहले से ही फोकस होगा और इसलिए ऑनफोकस इवेंट को निष्पादित नहीं करेगा।

1
Georgi Vatsov 27 मार्च 2018, 09:46