如何在弹出窗口（模态）中聚焦输入

Question

我有这个输入的模态弹出窗口。我想在弹出窗口出现时集中注意力。我尝试使用 onload focus 功能但不适合我。在这种情况下请帮助我。谢谢这里是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>

我面临的主要问题是。当我们在其标签中键入文本时，它会浮起来，效果很好。当我们保存它并返回并打开此弹出窗口以查看我们之前输入的值时。然后标签没有浮起来。它与值文本重叠，如果我们单击（专注于输入）。然后标签浮起来。这就是为什么我认为输入应该在弹出窗口出现时集中。所以价值和标签不重叠。

Answer 1

基于评论中的讨论。有两个问题：

关注负荷。在您的情况下，您需要添加：
另一种是正确绑定和触发事件。

这应该可以做到：

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

如何在弹出窗口（模态）中聚焦输入

How can I focus input in popup (Modal)

html

javascript

css

jquery

web-frontend