javascript - 我怎么知道光标现在焦点在输入或文本区域或选择

Question

我想运行 ajax 来获取一个值，如果值为 true，则提交表单，代码如下使用 onsubmit=xxx ，但是这个表单会立即提交，而不是等待 ajax 结果。然后我想使用带有onclick功能的“a”标签来提交表单，这可以完成这项工作，但是当我使用“enter”键提交表单时，不会运行ajax代码。然后我想在光标位于输入字段时绑定按键以提交表单。如何检查光标是否在表单域中？

<?php 
    if(isset($_POST['act'])){
        $rs=array(
            'status'=>0
        );
        echo json_encode($rs);
        exit;
    }
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="filters">
    <form onsubmit="return filters.submit()">
        <input type="text" name="name" />
        <input type="submit" value="submit" />
    </form>
</div>

<script type="text/javascript">
    var filters={
        form: $('.filters').find('form'),
        submit: function (){
            $.ajax({
                url:'index.php',
                type:'POST',
                data:{
                    act:'ajax'
                },
                success:function(rs){
                    eval('var rs='+rs);
                    if(rs['status']==1){
                        return true;
                    }else{
                        return false;
                    }
                }
            });
        }
    }
</script>

Answer 1

正如@Rajesh Jinaga 所说document.activeElement，返回当前关注的元素，但我想向您解释为什么它不起作用。

当您进行 ajax 调用时，它不会等到 ajax 返回 true 或 false。它将执行。因此，您需要阻止提交表单，并在您的 ajax 调用完成时使用 javascript 提交。

HTML

   <form>
        <input type="text" name="name" />
        <input type="submit" value="submit" />
    </form>

JAVASCRIPT (jQuery)

   $('form').submit(function (e){

        $.ajax({
            url:'index.php',
            type:'POST',
            data:{
                act:'ajax'
            },
            success:function(rs){
                // No need of EVIL eval('var rs='+rs);
                if(rs['status']==1){
                    $(this).submit(); // Will submit the form.
                }else{
                    alert("FAILED!");
                }
            }
            return false; // Shortcut for e.preventDefault() and e.stopPropagation() so it will prevent the form to be submitted.
        });

Answer 2

document.activeElement返回当前聚焦的元素，即，如果用户键入任何键，将获得击键事件的元素。

Answer 3

$(this).submit() 将不起作用，因为您处于不同的上下文中，并且成功回调调用程序发送 ajax 相关对象但不形成 DOM 对象。将对象存储到表单上下文中的变量中，并在成功回调中使用它。

 $(function(){
    $('form').submit(function (){
       var form = this;
        $.ajax({
            url:'index.php',
            type:'POST',
            data:{
                act:'ajax',
                status: $('[name=status]').val()
            },
            success:function(rs){
                eval('var rs='+rs);
                if(rs['status']==1){
                    $(form).submit();   // or $('form').submit()
                }else{
                    alert('error');
                }
            }
        });
        return false;
    });
});

Answer 4

@L105，谢谢你的回答，我修改了我的代码以匹配你的答案，但是表单无法使用 $(this).submit();

<?php 
    if(isset($_POST['act'])){
        $rs=array(
            'status'=> $_POST['status']
        );
        echo json_encode($rs);
        exit;
    }
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="filters">
    <form action="index.php" method="post">
        <input type="text" name="status" />
        <input type="submit" value="submit" />
    </form>
</div>

<script type="text/javascript">
    $(function(){
        $('form').submit(function (){
            $.ajax({
                url:'index.php',
                type:'POST',
                data:{
                    act:'ajax',
                    status: $('[name=status]').val()
                },
                success:function(rs){
                    eval('var rs='+rs);
                    if(rs['status']==1){
                        $(this).submit();   // can't submit
                    }else{
                        alert('error');
                    }
                }
            });
            return false;
        });
    });
</script>