ホームページ  >  記事  >  ウェブフロントエンド  >  jquery を使用して Enter キーをクリックし、ログイン効果を実現します (詳細なチュートリアル)

jquery を使用して Enter キーをクリックし、ログイン効果を実現します (詳細なチュートリアル)

亚连
亚连オリジナル
2018-05-31 14:54:252303ブラウズ

ここで、Enter キーをクリックしてログイン効果とデフォルトのフォーカスを実現する jquery メソッドを共有します。これは優れた参考値であり、皆さんの役に立つことを願っています。

最近プロジェクトにログインした際、対応するページに入るために毎回ログインボタンをクリックする必要があり、ユーザーに非常に不快な思いをさせたため、ログインに Enter キーの使用を追加しました。

方法:

<form> 
<input type="text" id="username_txt" placeholder="用户名" />
<input type="password" id="userpass_txt" placeholder="密码" />
    <button id="login_btn">登录</button>
</form>
$(function () { 
$(&#39;#username_txt&#39;).focus();
    //用户点击按钮
    $("#login_btn").click(function () {
    //获取用户名
    var username = $(&#39;#username_txt&#39;).val();
    //获取密码
    var userpass = $(&#39;#userpass_txt&#39;).val();
     if (username == "" || userpass == "") { alert("用户名密码不能为空!"&#39;); }
    else {
//调用登录方法
        $.ajax({
           
 });
 }
 });
$("body").keydown(function(event) {
 if (event.keyCode == "13") {//keyCode=13是回车键
$("#login_btn").click();
 }
}); 
});

最終レンダリング:

上記は私が皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

Angular CLIを使用してAngular 5プロジェクトを生成するための詳細なチュートリアル

JavaScriptプロトタイプとプロトタイプチェーンの分析

jqueryはファイルアップロード読み込み進行状況バーのドラッグ機能を実装します

以上がjquery を使用して Enter キーをクリックし、ログイン効果を実現します (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。