2018年1月29日 星期一

使用css讓input欄位內的placeholder值在碰觸或是focus到時就清空

現在做表單時通常都會在input或textare欄位上加上placeholder,提示使用者目前要輸入的欄位項目,但是placeholder有個缺點是,通常點了該欄位後,要開始輸入文字才會消失,而不是focus到該欄位時就消失,這在使用上其實有點干擾。

在jquery上可以在點擊到該欄位時以
$("input").removeAttr('placeholder');
來處理,不過也有人不建議用removeAttr來移除,

那麼可以試試用下列css的方法來處理:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

這個方式可以支援大部分瀏覽器甚至到ie9,ie8及更早的版本則未測試過

沒有留言: