作者kerash (K.T)
看板Ajax
標題[討論] placeholder js 版
時間Thu Apr 26 14:24:05 2012
在 html5 可以使用 placeholder 讓輸入框有提示需輸入內容的功能
在這之前大多數的 placeholder 都是用 js 判斷預設內容
例如:
若 value 為 placeholder 的文字，就加入做為 placeholder 的 class
反之就把預設內容清除並且把 class 消除
由於這種狀況在遇到必填資料時，若判斷內容是否為空時會很麻煩
得再多一次判斷內容是否為預設文字之類的方法
(雖然用 jQuery 去加入事件也很快啦QQ)
個人因為想當作學習也想製作自己的解決方案
所以參照了 hotmail 的登入方式，
用 div 蓋上去的方法來做假的 placeholder
並且想讓所有設定的東西一次套用上，
因此就嘗試自己初學寫一個 jQuery 的 plug-in
一方面當做紀錄，一方面想請大家指導一下我的 code 有哪些需要改進的部分
因為說實在話我的觀念都是網路拼拼湊湊，難免會錯誤
所以一邊學習一邊請教大家指導了 m(_ _)m
以下是網址
: http://kerash.net16.net/work/placeholder/v1_1/placeholder_v1_1.html
NEW:
http://kerash.net16.net/work/placeholder/v1_2/placeholder_v1_2.html
更新: 修正位移、修正判斷 placeholder 屬性
(原本有 v1.0 版，純用 js 語法寫出來的，但是因為意外刪除CODE後就回不來了QQ..)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.30.6
1F：→ dinos:用tab就.... 04/26 18:03
2F：→ kerash:tab的話用tabindex應該可以解決(? 04/26 19:27
3F：→ kerash:晚點用電腦測試看看 04/26 19:27
4F：→ kerash:會錯意了，是把click改成focus ..@@ 04/26 20:07
5F：推 zombiesky:感覺不錯 給個推! 04/26 23:43
6F：→ akiratw:縮放網頁之後位置就跑掉了 04/27 00:52
7F：→ akiratw:另外可以直接用 placeholder="..." 屬性相容 HTML5 04/27 00:54
8F：→ akiratw:如果瀏覽器已經有 placeholder 功能就不用再產生一次了 04/27 00:55
9F：→ akiratw:if('placeholder' in document.createElement('input')){ 04/27 00:59
10F：→ akiratw:↑判斷瀏覽器是否支援 placeholder 04/27 00:59
11F：→ kerash:感謝akira,我原本就是想找判斷原本功能就有的狀況 04/27 08:51
12F：→ kerash:只是還不確定要怎麼找! 我會在修改的 謝謝 04/27 08:52
13F：→ kerash:位置的話我在設定網頁移動後的定位 04/27 08:52
14F：→ TonyQ:我也有做過類似的東西～ 04/27 10:54
15F：→ kerash:Tony 大願意分享參考嗎 :)? 04/27 11:01
16F：→ TonyQ:基本上是一樣的作法啦 :) 04/27 12:24
17F：→ kerash:恩~謝謝，至少知道方向還沒算走錯~ 04/27 12:28
※ 編輯: kerash 來自: 114.32.186.193 (04/27 22:24)