让ENTER像Bootstrap

时间:2016-08-17 20:20:56

标签: jquery twitter-bootstrap button

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

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

我能够使用事件处理程序来捕获回车键并强制表单提交,但我真正想做的是捕获回车键以使其像用户点击一样行动登录按钮,我得到了#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)'>

1 个答案:

答案 0 :(得分:0)

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

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

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