在线情况
楼主
  • 头像
  • 级别
  • 徽章
  • 职务总版主
  • 声望+46
  • 积分17067
  • 经验1437298
  • 文章25385
  • 注册2003-01-20
IE8及以下版本HTML5 placeholder解决方案
[P]placeholder 是HTML5的新属性,在做input 的预设值还蛮方便的,但无奈IE8以下不支援,因此需要额外做fix。在实际应用中,却愈到了很多问题:[/P][P]例如在官网查到的plugin:[URL=http://plugins.jquery.com/project/input-placeholder]http://plugins.jquery.com/project/input-placeholder[/URL],就不支援type="password"的结果。因为仅改变value,对於password的显示方式[/P] [P]以下是我找到支援度最好地plugin:[/P][P]DEMO: [URL=http://mathiasbynens.be/demo/placeholder] http://mathiasbynens.be/demo/placeholder[/URL][/P][P]plugin: [URL=https://github.com/mathiasbynens/Placeholder-jQuery-Plugin] https://github.com/mathiasbynens/Placeholder-jQuery-Plugin[/URL][/P][P]然而在实做中愈到了一些bug,最後追source code追到plugin本身对於type="password"还有些bug, 一般的情况可能不会遇到,但偏偏就是让我遇到了,原因在於这一段程式[/P][P][sourcecode language="javascript"] if ($input.data('placeholder-password')) { $input.hide().next().show().focus(); } else { $input.val('').removeClass('placeholder'); } [/sourcecode][/P][P]当这只程式在做dom Traversing时,用到了[B][COLOR=rgb(5, 78, 249)]$input.hide().next().show().focus(); [/COLOR][/B],而bug就是因为在查找[B][COLOR=rgb(5, 78, 249)].next()[/COLOR][/B]时查找错误而造成。因此我将这几段程式做了一点小修改,简单解释如下:[/P][P][sourcecode language="javascript"] if ($input.data('placeholder-password')) { //$input.hide().next().show().focus(); //avoiding dom traversing by unsure dom structure $input.hide().data('placeholder-src').show().focus(); } else { $input.val('').removeClass('placeholder'); } [/sourcecode][/P][P]先用.data储存要替换的input element,将原本用DOM Traversing查出的Element改用.data取回物件。That's all.[/P][P]另外,我也顺手修正了一个小bug[/P][P][sourcecode language="javascript"] $replacement = $input.clone().attr({ type: 'text' }); $replacement .removeAttr('id') //we don't need id, it will be confused by selector within id .removeAttr('name') .data('placeholder-password', true) .data('placeholder-src', $input) .bind('focus.placeholder', clearPlaceholder); [/sourcecode][/P][P]我们也不需要复制id,尤其在做一些表单验证时,很多人会用id 来榜定做检查,这时这个element就会取得错误。[/P][P]?[/P][P]当然,我也commit上去给原作者,不过不晓得他会不会采用就是了。若需要修改後的版本请参考:[LINE-HEIGHT=19px][FACE=Georgia,][SIZE=13px][URL=http://blog.blackbing.net/wp-content/uploads/2011/01/jquery.placeholder.js.txt]Download jquery.placeholder.js[/URL][/SIZE][/FACE][/LINE-HEIGHT][/P][P]这让我想到在开发API时,如何建立自己的sandbox是很重要的。[/P][ol][li]不管你怎麽处理事情,只要画面不是你能控制的,永远不要相信被渲染过後的DOM结构,因此尽可能不要用模糊的DOM Travesing来查找元素。[/li][li]尽可能不要影响别人的行为,就如同clone Element 之後,你应该要避免复制id 以及name,否则有可能会影想到其他程式。[/li][/ol][P]随着jQuery越来越强大,plugin的质跟量也开始备受考验,不重新造轮子,但人家的轮子跑起来就是跑不远,怎办?有时候这也是很麻烦的一件事情,上述的例子还只是很单纯的事件,若遇到更复杂的专案可就不是简单trace source code就可以解决的事情。[/P]
LeadBBS 官方论坛(asp论坛)感谢您的参与
Page created in 0.0117 seconds with 4 queries.