使用自动对焦打开模态弹出窗口

Posted 2023-03-05

【中文标题】使用自动对焦打开模态弹出窗口

【英文标题】：Open Modal popup with Autofocus

【发布时间】：2014-04-12 16:14:50

【问题描述】：

我有以下代码：

<a href="#openModal"></a>

<div id="openModal" class="modalDialog">
<div>
<a href="" title="" class="close">X</a>

<?php 
//PHP code
//PHP code
//PHP code
//PHP code
echo "<center><b> Employee(s) List </b></center>";
echo "<br />";
for($i=0;$i<$num;$i++)
$row = mysql_fetch_assoc($result);
?>

// I NEED AUTOFOCUS HERE
<center>
<a href="cash_employee.php<?php echo "?name=".$row['name'] ?>" class="emp" ><?php echo ucfirst($row['name']) ?></a>
</center>
// I NEED AUTOFOCUS HERE

<?php   


echo "<center><a href='' title='' class='close2' onmousedown='location.reload(home.php);'>Close Window</a></center>";

else 
echo "<center>";
echo "<font color='red' size='+3'>Sorry!<br /> No Employee(s) Found </font>";   
echo "</center>";

?>
</div>
</div>

根据上面的代码，输出结果是员工姓名列表，您需要使用鼠标悬停并单击员工姓名继续。我正在寻找的是找到一种插入自动对焦选项的方法，以便使用键盘箭头（向上或向下）然后单击 Enter。我使用<input type="button" autofocus="autofocus" > 在不同的代码上使用了这种方法，它可以根据需要工作。但是当我改变

<a href="cash_employee.php<?php echo "?name=".$row['name'] ?>

让它看起来像这样

<input type="button" onclick="window.location('cash_employee.php<?php echo "?name=".$row['name'] ?>')" autofocus="autofocus"> 不行，但员工姓名列表可用。

还有其他方法吗，恐怕 Open Modal 不支持这个选项？ 请帮忙谢谢

对不起，我的英语不好。

【问题讨论】：

这可能不是 PHP 问题。我认为 PHP 代码在这里不起作用，因为模态窗口仅在客户端中打开。请发布 html 输出而不是 PHP 代码。

@HerrSerker 你错过了我的代码中的for loop 部分。它说 PHP 代码的行是我需要从 mysql 表中 SELECT 员工姓名的地方，并根据上面显示的方式将它们全部列出，同时使用模式。所以是的，我的问题需要 PHP。

【参考方案1】：

如果您将员工列表移动到其自己的 employeelist.php 文件中，则将其放置在您的页面中...

<div id="openModal" class="modalDialog">
   <?php include('employeelist.php'); ?>
</div>

然后您可以将您的按钮修改为以下...

<a id="cashEmployee" href="cash_employee.php<?php echo "?name=".$row['name'] ?>

然后在您的模态对话框中添加...

<script type="text/javascript">
    $(document).ready(function () 
        $('#cashEmployee').focus();
    );
</script>

【参考方案2】：

您可以使用以下代码来实现此效果。 （使用 jQuery）。

jQuery:

//Add first focus
$("a.active").focus();
$(document).keyup(function(e)
    //Up arrow
    if(e.which == 38)
        var prev = $("a.active");
        //Move focus around
        $("a.active").prev("a.employe").addClass("active").focus();
        prev.removeClass("active");
    
    //Down arrow
    if(e.which == 40)
        var prev = $("a.active");
        //Move focus around
        $("a.active").next("a.employe").addClass("active").focus();
        prev.removeClass("active");
    
);

示例 html：

<a href="javascript:alert('test1')" class='employe'>Test</a>
<a href="javascript:alert('test2')" class='employe'>Test</a>
<a href="javascript:alert('test3')" class='employe active'>Test</a>
<a href="javascript:alert('test4')"class='employe'>Test</a>

小提琴示例：http://jsfiddle.net/GA756/1/