替表單文字欄位加上提示

此篇文章最近更新時間為2008-1-27 目前共有0篇留言

相關標籤：

JosephJ 的照片

關於作者 - JosephJ

Yahoo! 前端工程師，專精於 AJAX、CSS、JavaScript。喜好戶外運動、剛完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

簡單版本的文字提示

今天幫部落格右上角的 Google 搜尋加上了文字提示的功能。這種效果只要簡單寫一些 JavaScript 就可以做到；且可增進 Accessbility、讓使用者更容易瞭解需要填上什麼資料。

所需函式庫：

setTextPrompt() 的原始碼：

var setTextPrompt = function (dInput,sText,dButton) {
                            var YUE = YAHOO.util.Event;
                            var YUD = YAHOO.util.Dom;
                            if (!dInput || !sText) {
                                return;
                            };
                            YUD.setStyle(dInput,'color','#999');
                            dInput.value = sText;
                            YUE.on(dInput, 'mouseup', function() {
                                if(this.value === sText){
                                    this.value = ''
                                    YUD.setStyle(dInput,'color','#000');
                                };
                            });
                            YUE.on(dInput, 'blur', function() {
                                if(this.value === ''){
                                    this.value = sText;
                                    YUD.setStyle(dInput,'color','#999');
                                };
                            });
                            // dButton 通常會指定給 Submit 按鈕
                            // 主要是按下送出時先檢查內容是否跟提示一樣
                            // 如果一樣就清空原有的內容
                            if (dButton) {
                                YUE.on(dButton, 'click', function() {
                                    if(dInput.value === sText) {
                                        dInput.value = '';
                                    }; });
                                YUE.on(dButton, 'change', function() {
                                    if(dInput.value === sText) {
                                        dInput.value = '';
                                    };
                                });
                            };
                        };

按此觀看範例

其實這個簡單的 function 很好用，我大概用在兩三個專案（一般的情況絕對夠用喔）。直到開始用在生活+ 我才發現它不夠，所以我就寫了一個物件，也就是下面進階的版本：

進階版本的文字提示

如下圖所示，生活+ 同時會有兩個文字提示，但這還不打緊，簡單版本搞得定。

但「商家」、「生活+」、與「地圖」三個種類切換可把我搞死了，因為從頭到尾都是這兩個框框要依不同分類隱藏，而且文字提示也得跟著變，上面簡單版本可沒這樣的彈性 :p

所需函式庫：

text-prompt.js 內容較多，要看的請直接點選

基本使用方法

以上面生活+ 為範例：

更換提示文字

按此觀看範例

聯絡我 RSS Feed

© 2007 Ting-yu Chiang All rights reserved.

觀看訪客統計報表