Как я могу сфокусировать ввод во всплывающем окне (модальное) - PullRequest
Новая
       6

Как я могу сфокусировать ввод во всплывающем окне (модальное)

0 голосов
/ 21 октября 2018

У меня есть модальное всплывающее окно с этим входом.Я хочу сосредоточиться, когда появляется всплывающее окно.Я пытаюсь использовать функцию фокуса onload, но у меня не работает.Добрый день, помогите мне в этом деле.Спасибо Вот 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}>

Здесь у меня есть еще одна функция JS, использующая для плавающей метки.

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

Основная проблема, с которой я сталкиваюсь - это.Когда мы набираем текст в ярлыке, всплывающее окно работает нормально.Когда мы сохраняем его, возвращаемся и открываем это всплывающее окно, чтобы увидеть значение, которое мы указали ранее.Тогда этикетка не всплыла.он перекрывает значение текста, и если мы нажмем (сосредоточиться на вводе).Тогда ярлык всплывет.Вот почему я думаю, что ввод должен фокусироваться, когда появляется всплывающее окно.поэтому значение и метка не перекрываются.

1 Ответ

0 голосов
/ 21 октября 2018

На основании обсуждения здесь в комментариях.Есть две проблемы:

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