把 label 放在 input 中

偶爾會需要做出這樣的效果：

• input 中有一段預設文字，提示其作用
• 使用者將輸入焦點放在 input 之後，預設文字清除
• 使用者若將自已輸入的文字全清除，並且將輸入焦點移離 input 時，則預設文字再度出現

原先很直覺的想到用全 javascript 做法。也就是利用 focus/blur 等事件，將 input 的 value 屬性值清除或設回預設值等等，像是 labels.js 這種做法。但這樣的做法有個缺點：預設文字可能會被送出。

雖然也可以在伺服器端檢查，但這麼做是提升了整件事的複雜度。如果哪天需要改預設文字，就要確定前、後端都能改。如果還要做多國語系，那請自求多福。

總之就是不能讓預設文字被送出。我用這種方法實做：

• input 的預設值一定要是空字串
• input 前面跟著一個 label, 其內容就是此 input 的預設文字
• input 的預設背景設成透明
• 當輸入焦點放在 input 時，背景設成白色。如果使用者有輸入任何文字，則使其白持白色。
• 如果沒有輸入任何文字，或被清空，當輸入焦點離開時，背景設回透明。
• label 弄成 display:block，並將其 margin-bottom 設為負值，使其與 input 重疊在一起。

簡單的說就是拿 label 來當 input 的「背景」。

實做測試如下：

label-runin.html

如果原網站有背景圖或背景色的話，就麻煩一點，需要把 label 調成正好跟 input 完全一樣大，再在 label 加上背景白色。

這麼做的話，看到預設文字時，實際上 input 的 value 是空字串。送出時也是空字串。多國語系也不會有影響。甚至 label 內換成圖片都可以。