Question

我有一个弹出窗口中的表单，我设置了自动聚焦属性autofocus="autofocus"，但是当表单加载时它没有聚焦，但是如果刷新页面它会聚焦。表单将插入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>

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

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

Answer 1

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

您可以强制将焦点放在用于呈现SimpleModal的Javascript代码中，将其添加到onShow事件中：

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

你没有在你的问题中包含用于打开弹出窗口的Javascript，所以这只是一个一般的例子：

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

Answer 2

解决“仅在页面刷新时自动对焦”的问题

在文件中进行以下更改：-

//In module.ts file 

import { AutofocusModule } from 'angular-autofocus-fix';

@NgModule({
imports: [
AutofocusModule
],

//In package.json file add the dependencies as:- 

    "dependencies": {
    "angular-autofocus-fix": "^0.1.0"
}

自动对焦仅适用于页面刷新

2 个答案: