作者dinos (守护神)
看板Ajax
标题Re: [讨论] placeholder js 版
时间Fri Apr 27 14:30:16 2012
※ 引述《kerash (K.T)》之铭言：
: 在 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
: (原本有 v1.0 版，纯用 js 语法写出来的，但是因为意外删除CODE後就回不来了QQ..)
这样跟 html5 的相容性会不会比较好一点？
若 value 为空，则塞入 placeholder
var has_placeholder=('placeholder' in _d.createElement('input'))?true:false;
if(!has_placeholder){
$('[placeholder]').blur(function(){
var $this=$(this);
var placeholder=$this.attr('placeholder');
var value=$this.val();
if(value==''){$this.val(placeholder);$this.addClass('placeholder');}
}).focus(function(){
var $this=$(this);
var placeholder=$this.attr('placeholder');
var value=$this.val();
if(value==placeholder){$this.val('');$this.removeClass('placeholder');}
}).blur();
$('form').submit(function(){
var req=0;
$(this).find('[placeholder]').each(function(){
var $this=$(this);
if($this.val()==$this.attr('placeholder')){$this.val('');}
if($this.attr('req') && $this.val()==''){req++;}
});
if(req>0){
$(this).find('[placeholder]').each(function(){
var $this=$(this);
if($this.val()==''){
$this.val($this.attr('placeholder'));
$this.addClass('placeholder');
}
});
return false;
}
});
}
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 175.181.51.65
1F：推 kerash:基本上新的版本(还没传)已经把 placeholder 的判断加入了 04/27 14:50
2F：→ kerash:另外我不去把 placeholder 加在 input 的 value 前面有说过 04/27 14:51
3F：→ kerash:纯粹只是判断方便而已@@ (就如你的CODE，要判断是否等於 04/27 14:51
4F：→ kerash:placeholder 的值很方便没错..) 04/27 14:51
5F：→ kerash:不过很感谢分享，另外focus时HTML的placeholder 不会消失 04/27 14:52
6F：→ kerash:我以我把事件改成 keydown 了 :D 04/27 14:53
7F：→ kerash:勘正.. placeholder 只有在 chrome 才不会预先消失QQ 04/27 16:32
加上黄色那一段应该是可行的?
※ 编辑: dinos 来自: 211.76.43.193 (04/28 08:35)
8F：推 kerash:恩恩 其实方法应该都是一样的，我在想能不能再加一些功能 04/28 10:48
9F：→ kerash:w3 的 placeholder 解释的不多，不确定有没有漏缺@@ 04/28 10:49
10F：→ TonyQ:操作 value 的缺点是跟其他 plugin 的相容性会变低 04/28 18:00