呃,我也不知道這個標題這樣下對不對。
我不知道這個學名叫做什麼 XDD

簡單來說就是input在焦點時(在該input文字框內準備輸入時),原本的說明文字會消失,若最後思考了許久沒下標題,移開了以後說明文字又會出現。
我找了幾個網站看不出來他們怎麼實現的,網路上找的又只能針對單一物件下函式,我就自己改了一下。

 

實做方式的話,我是input的value指定說明文字,而後方在多加span標籤,內容也是說明文字。
大概長這樣:<input name="sSearch_1" type="text" class="os" value="說明文字" size="60"/><span>說明文字</span> 
當然你也可以在span修改成 點了又不負責是哪招之類的 其他內容
透過jquery偵測focus狀態及blur狀態進而修改內容。

 

方式一(使用blur):

        $('input').focus(function() {  
            
            if($(this).val()==$(this).next('span').text()) {  
                $(this).val("");  
            }
            
            $(this).addClass('input_focus');
        });  
        $('input').blur(function() {  
            if($(this).val()=="") {  
                $(this).val($(this).next('span').text());  
            }
            $(this).removeClass('input_focus');
        }); 

 

方式二(使用focusin、focusout):

        $('input').focusin(
            function(){
                if($(this).val()==$(this).next('span').text()) {  
                    $(this).val("");  
                }
                $(this).addClass('input_focus');
            }).focusout(
            function(){
                if($(this).val()=="") {  
                    $(this).val($(this).next('span').text());  
                }
            $(this).removeClass('input_focus');
        });

 

當然class就是變化囉,可以調整顏色,搭配之前發的

transition:all 0.5s ease-in-out;

可以有很漂亮的效果。

 

arrow
arrow
    文章標籤
    jquery input blur focus
    全站熱搜

    ezcshi 發表在 痞客邦 留言(0) 人氣()