javascript - 密码上的 Facebook Dom 占位符

Question

登录时，Facebook 的密码字段上有一个“Dom Placeholder”。当我单击密码输入时，占位符消失并允许我“屏蔽”输入密码。

这个 Javascript 相关吗？我将如何继续复制这个脚本？

Answer 1

是的，可以通过 JavaScript 来完成，但有些浏览器本身也支持它。 placeholder 属性是 HTML5 的新增内容；某些浏览器(例如基于 WebKit 的浏览器)已经支持它。

使用 jQuery 1.4 的示例

<!-- this will work automatically for some browsers -->
<input type="text" placeholder="enter some text">


<!-- script for browsers which don't support it natively -->
<script type="text/javascript">
$.fn.placeholder = function(){

  // quit if there's support for html5 placeholder
  if (this[0] && 'placeholder' in document.createElement('input')) return; 

  return this
    .live('focusin',function(){

      if ($(this).val() === $(this).attr('placeholder')) {
        $(this).val('');
      }

    }).live('focusout',function(){

      if ($(this).val() === ''){
        $(this).val( $(this).attr('placeholder') );
      }_  
    });
}

$('input[placeholder]').placeholder();
</script>

注意:代码复制自 this Pastie链接自 jQuery 1.4 hawtness 。我尚未验证它是否可以跨浏览器工作。如果您不使用 jQuery，则可以在 Google 上找到其他 JavaScript 解决方案。