jQuery 文字方塊得失焦點的簡單實例_jquery

版本一

css程式碼部分：

複製程式碼 程式碼如下:

. >     border: 1px solid #f00;
     background: #fcc;
}


當焦點取得時，加入時，加上邊框樣式，加上邊框會產生顏色為「背景>

html程式碼部分：

複製程式碼 程式碼如下:   

       

          

                    名稱:
                   
                    密碼:
                   
                    詳細資料:
                    div >       
   



這裡有兩個input，一個textare框。

:input符合 所有 input, textarea, select 和 button 元素。

jQuery程式碼部分：




複製程式碼

程式碼如下:

程式碼如下:

     🎜>

用:input來搭配所有的input元素，當取得焦點時，就加入樣式focus，透過$(this)自動辨識目前的元素。 focus()方法是取得焦點事件發生時執行的函數。 blur()方法是失去焦點事件發生時執行的函數。

版本二：


有時候文字框裡有預設的內容，作為提示訊息，取得焦點後，要讓它消失。可以做以下的改造：




複製程式碼

程式碼如下:

做個邏輯判斷，如果值為默認值，就將文字方塊中的內容清空。

失去焦點，如果文字方塊中為空，也就是沒有輸入內容，就將值還設為預設值。

這是一個簡單的邏輯。