打开模式弹出与自动对焦

Question

我有以下代码:

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

根据上面的代码，输出将产生员工姓名列表，您需要使用鼠标悬停并单击员工姓名以继续。我要找的是找到一种方法来插入自动对焦选项，以便使用键盘箭头(向上或向下)，然后点击进入。我使用<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不支持这个选项?请帮忙谢谢

我很抱歉我的英语很差

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

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