मेरे पास इस इनपुट के साथ मोडल पॉपअप है। जब कभी पॉपअप दिखाई देता है तो मैं ध्यान केंद्रित करना चाहता हूं। मैं ऑनलोड फोकस फ़ंक्शन का उपयोग करने का प्रयास करता हूं लेकिन मेरे लिए काम नहीं कर रहा हूं। कृपया इस मामले में मेरी मदद करें। धन्यवाद यहाँ एचटीएमएल है

<label for="postcodeSelectInput">{l s='Post/Zip Code' mod='prestadelivery'}</label>
    <input type="text" autofocus class="form-control" id="postcodeSelectInput" placeholder="" {if $selected_address}value="{$selected_address|escape:'html':'UTF-8'}"{/if}>

यहां मेरे पास फ़्लोटिंग लेबल के लिए एक और जेएस फ़ंक्शन है।

    <script>
    $(function() {
  $('input, textarea, select').on('focus', function() {
    var id = $(this).attr('id'),
        label = 'label[for="' + id + '"]';

    $(this).addClass('has-value');
    $(label).addClass('has-value');

  }).on('blur', function() {
    var id = $(this).attr('id'),
        label = 'label[for="' + id + '"]',
        value = $(this).val();

    if (value.length <= 0) {
      $(this).removeClass('has-value');
      $(label).removeClass('has-value');
    }
  });
});
</script>

मैं जिस मुख्य मुद्दे का सामना कर रहा हूं वह है। जब हम इसके लेबल में टेक्स्ट टाइप करते हैं तो फ्लोट ऊपर हो जाता है जो ठीक काम करता है। जब हम इसे सेव करते हैं और वापस आते हैं और इस पॉपअप को खोलने के लिए हमारे द्वारा पहले रखी गई वैल्यू को देखते हैं। तब लेबल तैरता नहीं था। यह मूल्य पाठ को ओवरलैप करता है, और यदि हम क्लिक करते हैं (इनपुट पर ध्यान दें)। फिर लेबल ऊपर तैरता है। इसलिए मैं सोच रहा हूं कि जब भी पॉपअप दिखाई दे तो इनपुट पर ध्यान देना चाहिए। इसलिए मूल्य और लेबल ओवरलैप नहीं होते हैं।

0
Nimra Waseem 21 अक्टूबर 2018, 21:44

1 उत्तर

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

टिप्पणियों में यहां चर्चा के आधार पर। दो समस्याएं हैं:

  1. भार पर ध्यान दें। आपके मामले में आपको जोड़ने की जरूरत है:

  2. दूसरा यह है कि घटनाओं को ठीक से बाध्य किया जाए और ट्रिगर किया जाए।

यह करना चाहिए:

<script>

  $('input, textarea, select').on('focus', function() {
    var id = $(this).attr('id'),
        label = 'label[for="' + id + '"]';

    $(this).addClass('has-value');
    $(label).addClass('has-value');

  }).on('blur', function() {
    var id = $(this).attr('id'),
        label = 'label[for="' + id + '"]',
        value = $(this).val();

    if (value.length <= 0) {
      $(this).removeClass('has-value');
      $(label).removeClass('has-value');
    }
  });


  $('input, textarea, select').focus();

</script>
0
Lukasz 21 अक्टूबर 2018, 19:47