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/

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

2 个答案: