問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]浮水印式的輸入框提示



[jQuery]浮水印式的輸入框提示
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106

一個體貼使用者的系統,通常都會在一些輸入框中加上貼心的提示,像 MSN 的搜尋框就有這樣的提示功能



基本常看到的做法都是先變更輸入框的 value 值為提示的內容,這樣的做法雖然簡單但最後表單要送出或是驗證時,都要先進行內容的過濾,畢竟總不可能把提示的內容往後端傳送吧!

這樣雖然能達到想要的提示效果,但總覺得不夠方便直覺,且變化度也不夠,因此筆者就想到改用類似浮水印的方式來達成同樣的功能。所謂的浮水印就是在原本的畫面上再加上一層…"",讓我們來看圖示說明:



由上圖中可以看到外層有一個要用來提示用的區塊,筆者要透過程式來把提示區塊移動到輸入框的上方,讓兩者疊在一起,偽裝成提示區塊跟輸入框是一體的感覺。因為提示區塊本身是一個 Div 來做成的,所以內容要放文字或是圖片都可以,這樣的提示效果就會比單調的文字更能讓使用者了解。

我們的 HTML 其實不用什麼特別的設定,只要一般的輸入框就可以了



<body>
    <
input type="text" name="" title="搜尋聯絡人或網址..." class="c1" />
    <
br />
    <
input type="text" name="" title="" class="c2" />
    <
br />
    <
input type="text" name="" title="請輸入密碼" class="c3" />
    <
br />
    <
textarea name="" rows="5" cols="20" title="寫寫自己的喜好"></textarea>
</
body>

有些輸入框我有加入自訂的 CSS 效果,然後筆者也想藉由同樣的 className 來自訂不同的提示樣式,所以在 CSS 中有做一點變化



.c3 {
    
color: blue;
}

div.c1 {
    
color: #ccc;
    
background-image: url(sprite.png);
    
background-repeat: no-repeat;
    
background-position: 134px -2038px;
}
div.c2 {
    
color: red;
    
background-image: url(sprite.png);
    
background-repeat: no-repeat;
    
background-position: 3px -2669px;
}
div.c3 {
    
color: #ccc;
    
background-color: #ff9;
}

假設原本輸入框的 className.c1,那麼在寫 CSS 時,筆者除了 .c1 之外還會多寫一個 div.c1 來讓自訂的提示區塊使用。



接著就是加上讓我們用 jQuery 來完成浮水印的提示區塊



$(function(){
    
// 取得要加上提示的元素並一一設定
    
$(":text, textarea").each(function(i, ele){
        
// 先把目前元素轉換成 jQuery 物件後記錄起來
        // 再取得 title 及 className 屬性值
        
var _text = $(ele),
            
_title = _text.attr("title"),
            
_class = _text.attr("className") || "";

        
// 如果有 title 或是 className 值的話,則進行改造
        
if(!!_title || !!_class){
            
// 在 body 中插入一個空白的 Div 區塊來當提示區塊
            
var _water = $("<div></div>").appendTo("body");
            
// 設定提示區塊的 css 屬性(基本是讓它跟輸入框一樣)
            // position 一定要設成 absolute 才能移來移去
            
_water.css({
                
position: "absolute",
                
width: _text.width(),
                
height: _text.height(),
                
fontSize: _text.css("fontSize"),
                
lineHeight: _text.css("lineHeight"),
                
top: _text.position().top + parseInt(_text.css("borderTopWidth"), 10) + "px",
                
left: _text.position().left + parseInt(_text.css("borderLeftWidth"), 10) + "px",
                
paddingTop: _text.css("paddingTop"),
                
paddingBottom: _text.css("paddingBottom"),
                
paddingLeft: _text.css("paddingLeft"),
                
paddingRight: _text.css("paddingRight"),
                
marginTop: _text.css("marginTop"),
                
marginBottom: _text.css("marginBottom"),
                
marginLeft: _text.css("marginLeft"),
                
marginRight: _text.css("marginRight"),
                
cursor: "text",
                
overflow: "hidden"
            
// 把提示區塊的內容設成輸入框的 title 值
            
}).html(_title).click(function(){
                
// 當提示區塊被點擊時,觸發輸入框的 focus 事件
                
_text.trigger("focus");
            
// 最後加上額外的 className
            
}).addClass(_class);

            
// 設定輸入框的 focus 及 blur 事件
            
_text.focus(function(){
                
// 隱藏提示區塊
                
_water.hide();
            }).
blur(function(){
                
// 如果輸入框中沒有值則再顯示提示區塊
                
if(this.value=="") _water.show();
            });
        }
    });
});

筆者為了讓提示區塊跟輸入框能更像一體的感覺,所以就盡量的讓提示區塊的 CSS 能跟輸入框的一模一樣,所以連同 cursor 也要變成 text 的型態才行唷!


最後讓我們來看看效果:



嘿~是不是變的更有效果了呢,這樣的提示我想會讓使用者更直覺的!


範例瀏覽:http://demonstration.abgne.tw/jquery/0007/0007.html



以上內容於2009-07-25 13:47 發表在 http://abgne.tw/jquery/apply-jquery/jquery-watermar.html



2009/8/31 11:08
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS