How can I focus input in popup (Modal)

Question

I Have modal popup with this input. I want to focus when ever popup appears. I try to use onload focus function but not working for me. Kind help me in this case. Thank you Here is html

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

Here I have another js function using for floating label.

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

The main issue I am facing is. When we type the text in its label float up which works fine. When we save it and come back and open this popup to see the value we put before. Then label did not float up. it overlaps the value text, And if we click (focus on input). Then label float up. That's why I am thinking that input should focus when ever popup appears. so value and label not overlap.

Answer 1

Based on the discussion here in comments. There are two problems:

1. Focus on load. In your case you need to add:

2. Another is to have the events bound properly and triggered.

This could should do:

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