jquery聚焦失焦

jQuery是一種腳本語言，它可以讓開發者透過編寫JavaScript程式碼來操作HTML和CSS。它提供了許多方便的函數和方法來幫助開發者加強Web頁面的互動性。其中，聚焦和失焦是一種常見的互動操作，本文就來說明jQuery中的聚焦和失焦的用法和實作方法。

一、聚焦

在Web開發中，聚焦指的是將滑鼠或鍵盤遊標放在輸入框或其他可編輯的元素上，讓它成為當前「活躍」的元素，可以輸入資料或執行其他的操作。在jQuery中，可以透過focus()方法來實現聚焦功能。

語法：$(selector).focus()

#其中，selector表示需要聚焦的元素，可以是id、class、標籤等選擇器。例如，聚焦id為input的元素，可以使用以下程式碼：

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

#或使用下列程式碼：

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

或使用以下程式碼：

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

在上述程式碼中，使用了不同的選擇器方式來選擇需要聚焦的元素，但是它們的效果是一樣的。

在實際的開發中，有時候需要在頁面載入時自動聚焦某個元素，可以在頁面載入完成後，使用jQuery的ready()方法來實作。

程式碼如下：

$(document).ready(function(){

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

});

在上述程式碼中，使用了$( document).ready()方法來等待頁面載入完成後，再執行聚焦操作。

二、失焦

與對焦相反，失焦指的是將滑鼠或鍵盤遊標從當前焦點元素上移開，讓它不再是「活躍」的元素，不再響應輸入或操作。在jQuery中，可以透過blur()方法來實現失焦操作。

語法：$(selector).blur()

#其中，selector表示需要失焦的元素，可以是id、class、標籤等選擇器。例如，失焦id為input的元素，可以使用下列程式碼：

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

或使用下列程式碼：

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

或使用以下程式碼：

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

同樣的，失焦也可以在頁面載入時自動實現，可以在頁面載入完成後，使用jQuery的ready()方法來實現。

程式碼如下：

$(document).ready(function(){

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

});

#三、套用實例

#下面，我們透過一個應用實例來展示聚焦和失焦的應用效果。

程式碼如下：

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中文網其他相關文章！