自动对焦仅在页面刷新时起作用

问题描述

我有一个处于弹出状态的表单，我设置了autofocus属性autofocus="autofocus"，但是在加载表单时它没有聚焦，但是如果刷新页面，它将聚焦.表单被插入到div.

I have a form which is in a popup, I've set the autofocus attribute autofocus="autofocus" but it is not focusing when the form loads however it will focus if you refresh the page. The form is inserted into a div.

表格样本:

First Name:<input type="text" name="fname" placeholder="First Name" class="userField" autofocus="autofocus" id="firstNameUserField" value="<?php
    if(isset($_SESSION['firstname'])){
       echo trim($_SESSION['firstname']);
    }
  ?>">

Div表单已插入:

  <div class="main">
    <a href="#x" class="overlay" id="detail_form"></a>
    <div class="popup">
      <div id="detailFormPopup"></div>
      <a class="close" id="logClose"href="#close"></a>
    </div>
  </div>

如果用户登录并单击其用户名，则会显示表格:

Form is shown if user is logged in and clicks their username:

if(isset($_SESSION['username'])){
          echo "<a href='#detail_form' class='navlinks' id='navUser'>".$_SESSION['username']."</a></h3>";
        }

推荐答案

autofocus仅适用于最初在页面中的元素，不适用于使用Javascript加载的元素.

autofocus will apply only for elements initially in the page, not elements loaded with Javascript.

您可以将焦点置于用于渲染SimpleModal的Javascript代码中，将其添加到onShow事件中:

You can force the focus in the Javascript code that you use to render the SimpleModal, add it to the onShow event:

$('#firstNameUserField').focus();

您没有在问题中包含用于打开弹出窗口的Javascript，因此这只是一个一般示例:

You didn't include the Javascript used to open the popup in your question, so this is just a general example:

$("#popupEl").modal({onShow: function (dialog) {
 $('#firstNameUserField').focus();
}});

这篇关于自动对焦仅在页面刷新时起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！