Question

我有一个使用Bootstrap的基本登录页面，用户输入一个电子邮件地址和密码，然后按下＆＃34;登录＆＃34;按钮登录我们的在线应用程序。

引导按钮使用＆＃34; data-xxx-complete＆＃34;文本标识符，用于将按钮的颜色和状态更改为＆＃34;认证...＆＃34;用户点击后。

我能够使用事件处理程序来捕获回车键并强制表单提交，但我真正想做的是捕获回车键以使其像用户点击一样行动登录按钮，我得到了＃34;认证......＆＃34;在表单提交之前对该元素进行状态更改。这很重要，因为有时登录过程需要几秒钟。

这是按钮：

echo "<div class='form-group' id='sendBtn1'>";
    echo "<div class='col-xs-3 text-left'>";
        echo "<button type='button' id='sendButton' class='btn btn-primary' autocomplete='off' data-complete-text='Authenticating...' onclick=\"$(this).button('complete');$(this).prop('disabled',true);J_action('signin');\" >";
        echo "Sign In";
        echo "</button>";
    echo "</div>";
echo "</div>";

从登录按钮调用的J_Action();函数只调用一个简单的JS例程来处理登录的下一步和下一步操作。

处理按键的代码在我的标题中如下：

    ...
    function checkSubmit(e) { 
        if(e && e.keyCode == 13) {
            J_action('signin');
        }
    }
    </script>
</head>
<body onKeyPress='return checkSubmit(event)'>

有没有办法直接告诉bootstrap中的按钮改变它的状态？

我尝试将按钮本身的onClick事件中的相同JS调用添加到事件处理程序，但我不确定是否使用按钮的ID名称代替(this)命名法是正确的语法。这对我来说无法改变按钮的状态。

    ...
    function checkSubmit(e) { 
        if(e && e.keyCode == 13) {
            $(sendButton).button('complete');
            $(sendButton).prop('disabled',true);
            J_action('signin');
        }
    }
    </script>
</head>
<body onKeyPress='return checkSubmit(event)'>

Answer 1

您只需要正确使用jquery选择器即可。您可以使用选择器选择类似CSS的样式。

因此，要选择id="sendButton"，您需要一个＃符号来表示您想要ID为sendButton的项目：$('#sendButton')。所以你想将你的代码更改为

$('#sendButton').button('complete');
$('#sendButton').prop('disabled',true);

让ENTER像Bootstrap

1 个答案: