JQuery-Fokus unscharf

jQuery ist eine Skriptsprache, die es Entwicklern ermöglicht, HTML und CSS durch das Schreiben von JavaScript-Code zu manipulieren. Es bietet viele praktische Funktionen und Methoden, die Entwicklern dabei helfen, die Interaktivität von Webseiten zu verbessern. Unter diesen sind Fokus und Defokus eine gängige interaktive Operation. In diesem Artikel wird die Verwendung und Implementierung von Fokus und Defokus in jQuery erläutert.

1. Fokussieren

In der Webentwicklung bedeutet Fokussieren, dass der Maus- oder Tastaturcursor auf dem Eingabefeld oder einem anderen bearbeitbaren Element platziert wird, wodurch es zum aktuell „aktiven“ Element wird, das Daten eingeben oder andere Aufgaben ausführen kann. In jQuery kann die Fokusfunktion über die Methode focus() erreicht werden.

Syntax: $(selector).focus()

Unter diesen stellt der Selektor das Element dar, das fokussiert werden muss. Dies kann ein Selektor wie ID, Klasse, Beschriftung usw. sein. Um sich beispielsweise auf das Element mit der Eingabe-ID zu konzentrieren, können Sie den folgenden Code verwenden:

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

oder den folgenden Code verwenden:

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

Oder verwenden Sie den folgenden Code:

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

Im obigen Code werden verschiedene Auswahlmethoden zur Auswahl verwendet die Elemente, die fokussiert werden müssen, aber ihre Wirkung ist die gleiche.

In der tatsächlichen Entwicklung ist es manchmal notwendig, sich beim Laden der Seite automatisch auf ein Element zu konzentrieren. Dies kann durch die Verwendung der ready()-Methode von jQuery nach dem Laden der Seite erreicht werden.

Der Code lautet wie folgt:

$(document).ready(function(){

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

});

Im obigen Code wird die Methode $(document).ready() verwendet, um auf das zu warten Seite, die geladen werden soll, bevor der Fokusvorgang ausgeführt wird.

2. Defokussieren

Im Gegensatz zum Fokus bedeutet Defokussieren das Bewegen des Maus- oder Tastaturcursors vom aktuell fokussierten Element weg, sodass es kein „aktives“ Element mehr ist und nicht mehr auf Eingaben oder Operationen reagiert. In jQuery kann eine unscharfe Operation durch die Methode „blur()“ erreicht werden.

Syntax: $(selector).blur()

Unter diesen stellt der Selektor das Element dar, das unscharf sein muss. Dies kann ein Selektor wie ID, Klasse, Beschriftung usw. sein. Um beispielsweise das Element, dessen ID eingegeben wird, zu defokussieren, können Sie den folgenden Code verwenden:

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

oder den folgenden Code verwenden:

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

Oder verwenden Sie den folgenden Code:

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

Ähnlich kann die Defokussierung auch automatisch beim Laden der Seite erreicht werden, Oder verwenden Sie nach dem Laden der Seite die Methode ready() von jQuery, um dies zu erreichen.

Der Code lautet wie folgt:

$(document).ready(function(){

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

});

3. Anwendungsbeispiel

Nachfolgend zeigen wir den Anwendungseffekt von Focus und defokussieren.

Der Code lautet wie folgt:

94805b67e7044f5f0a55c0c24f8c5a0b

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>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

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

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

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

8f5b9aa5c927524bbdc12e99c629eb15

Im obigen Code werden zunächst ein Eingabefeld und eine Schaltfläche definiert. Der Benutzer kann Informationen in das Eingabefeld eingeben und auf die Schaltfläche klicken, um die Informationen auf der Seite anzuzeigen. In jQuery werden die Methoden „focus()“ und „blur()“ verwendet, um Fokus- und Defokussierungseffekte zu erzielen. Wenn das Eingabefeld den Fokus erhält, wird die Hintergrundfarbe grau, und wenn es defokussiert wird, wird die Hintergrundfarbe weiß. Gleichzeitig wird die Methode click() verwendet, um das Klickereignis der Schaltfläche zu implementieren, den Wert im Eingabefeld abzurufen und ihn auf der Seite anzuzeigen.

Anhand des obigen Codes können wir sehen, dass Fokus und Defokussierung eine sehr häufige interaktive Operation sind und auch in der Webentwicklung häufig verwendet werden. jQuery bietet praktische Methoden wie focus () und unscharf (), um sie zu implementieren um das Seiteninteraktionserlebnis zu bereichern und Benutzern ein besseres Nutzungserlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonJQuery-Fokus unscharf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!