jQueryのフォーカスが合っていない

jQuery は、開発者が JavaScript コードを記述して HTML と CSS を操作できるようにするスクリプト言語です。これは、開発者が Web ページの対話性を強化するのに役立つ多くの便利な機能とメソッドを提供します。その中でも対話操作としてよく使われるのがフォーカスとデフォーカスですが、この記事ではjQueryにおけるフォーカスとデフォーカスの使い方と実装について解説します。

1. フォーカス

Web 開発では、フォーカスとは、入力ボックスまたはその他の編集可能な要素上にマウスまたはキーボードのカーソルを置いて、それを現在「アクティブ」な要素にすることを指します。データを取得したり、他の操作を実行したりできます。 jQuery では、focus() メソッドを通じてフォーカス機能を実現できます。

構文: $(selector).focus()

このうち、selector はフォーカスする必要がある要素を表し、id、class、label などのセレクターが可能です。たとえば、input の ID を持つ要素に焦点を当てるには、次のコードを使用できます:

$("#input").focus();

または次のコードを使用します。 :

$ ("input#input").focus();

または次のコードを使用します:

$("input[id='input']" ).focus();

上記のコードでは、フォーカスする必要がある要素を選択するためにさまざまなセレクター メソッドが使用されていますが、その効果は同じです。

実際の開発では、ページ読み込み時に自動的に要素にフォーカスしたい場合がありますが、これはページ読み込み後にjQueryのready()メソッドを使用することで実現できます。

コードは次のとおりです:

$(document).ready(function(){

$("#input").focus();

});

上記のコードでは、 $( document).ready() メソッドを使用して、フォーカス操作を実行する前にページがロードされるのを待ちます。

2. デフォーカス

フォーカスとは反対に、デフォーカスとは、現在フォーカスされている要素からマウスまたはキーボードのカーソルを移動して、その要素が「アクティブ」要素でなくなることを指します。または操作。 jQuery では、ぼかし操作は Blur() メソッドを通じて実現できます。

構文: $(selector).blur()

このうち、selector はフォーカスを外す必要がある要素を表し、id、class、label、などのセレクターが可能です。等たとえば、ID が入力された要素のフォーカスを外すには、コード

$("#input").blur();

または次のコードを使用できます。

## $("input#input").blur();

または、次のコードを使用します:

$("input[id='input']")。 Blur();

同様に、ページ読み込み後にjQueryのready()メソッドを使用することで、ページ読み込み時に自動的にぼかしを実現できます。

コードは次のとおりです:

$(document).ready(function(){

$("#input").blur();

});

3. アプリケーション例

以下では、アプリケーション例を使用して、フォーカスとデフォーカスのアプリケーション効果を示します。

コードは次のとおりです:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>jQuery聚焦失焦</title>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">

    #input{

        width: 200px;

        height: 30px;

        font-size: 16px;

    }

    #result{

        margin-top: 20px;

        font-size: 16px;

    }

</style>

<script type="text/javascript">

    $(document).ready(function(){

        $("#input").focus(function(){

            $(this).css("background-color", "#f2f2f2");

        });

        $("#input").blur(function(){

            $(this).css("background-color", "#ffffff");

        });

        $("#btn").click(function(){

            $("#result").text($("#input").val());

        });

    });

</script>

7cdffbc981ce578dc6212f54b5f55c8e

6c04bd5ca3fcae76e30b72ad730ca86d

<input type="text" id="input" placeholder="请输入信息" />

<button id="btn">获取</button>

<div id="result">聚焦失焦效果演示</div>

36cc49f0c466276486e50c850b7e4956

##73a6ac4ed44ffec12cee46588e518a5e

上記のコードでは、入力ボックスとボタン。ユーザーは入力ボックスに情報を入力でき、ボタンをクリックすると情報がページに表示されます。 jQuery では、focus() メソッドと Blur() メソッドを使用してフォーカスとデフォーカスの効果を実現します。入力ボックスがフォーカスされると、背景色は灰色に変わり、フォーカスが外されると、背景色は白に変わります。同時に、 click() メソッドを使用してボタンのクリック イベントを実装し、入力ボックスの値を取得してページに表示します。

上記のコードを通して、フォーカスとデフォーカスは非常に一般的な対話型操作であり、Web 開発でも非常に一般的に使用されていることがわかります。jQuery は実装に便利な focus() メソッドと Blur() メソッドを提供します。これらを使用して、ページのインタラクション エクスペリエンスを強化し、ユーザーにより良い使用エクスペリエンスを提供します。

以上がjQueryのフォーカスが合っていないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。