jQuery/输入字段(user，pass）就像twitter一样's登录

我已经编写了一个插件来实现这一点，但找不到任何使用类似twitter的div默认值的插件。

请参阅工作小提琴：http://jsfiddle.net/garreh/nCCPQ/2/

jQuery:$.defaultText插件

// Basic Usage:
$('input').defaultText({ text: 'Username' });
// Provide a class to use:
$('input').defaultText({ text: 'Email address', css: 'enter_email' });

$.fn.defaultText = function(options) {
    var defaults = {
        css: 'dimmed'
    };
   
    var options = $.extend({}, defaults, options);
    
    if (!('text' in options)) return this;
    
    var input = this[0],
        $input = this,
        offset = $input.offset();
       
    function hide() {
      $div.hide();
      $input.add($div).removeClass(options.css);
    };
    
    function show() {
       $div.show();
       $input.add($div).addClass(options.css);
    }
        
    function focus() {
        if (input.value.length) hide();
        else show();
    };
    
    // Create div to put placeholder text in
    var $div = $('<div>' + options.text + '</div>')
        // Position it to the same place as the input box:
        .css({ position: 'absolute',
               top: offset.top,
               left: offset.left + 4,
               cursor: 'text'
            })
        .click(function() {
            $input.focus();
            focus();
        })
        .addClass(options.css + ' unselectable')
        .appendTo('body');
    
    // Also add the class to the input box:
    $input
        .addClass(options.css)
        .keyup(focus).blur(function() {
            if (!input.value.length) show();
        });
    
    return this;
};

465个字节被缩小，323个gzipped:

$.fn.defaultText=function(a){function d(){c.show();b.add(c).addClass(a.css)}
function e(){f.value.length?(c.hide(),b.add(c).removeClass(a.css)):d()}
a=$.extend({},{css:"dimmed"},a);if(!("text"in a))return this;var f=this[0],
b=this,g=b.offset(),c=$("<div>"+a.text+"</div>").css({position:"absolute",
top:g.top,left:g.left+4,cursor:"text"}).click(function(){b.focus();e()})
.addClass(a.css+" unselectable").appendTo("body");b.addClass(a.css).keyup(e)
.blur(function(){f.value.length||d()});return this};

您可以在点击时使用Delete输入文本默认值的答案，或者如果您喜欢一些HTML5表单，现在有了对该功能的本地支持；它被称为占位符属性。

Twitter实际上在<div>包装器和JavaScript中使用了一个"来实现这种效果。

<div class="holding username">
    <input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
    <span class="holder">Username</span>
</div>

HTML:

<input type="text" title="User Name" value="User Name" class="username">

jQuery:

$('input.username')
.focus(function(){
  var $this = $(this);
  if ($this.val() == $this.attr('title')) {
    $this.val('').removeClass('dimmed');
  }
})
.blur(function(){
  var $this = $(this);
  if ($this.val().length == 0){
    $this.val($this.attr('title')).addClass('dimmed');
  }
});

CSS：

input.username {
  color: #000;
}
input.username.dimmed {
  color: #888;
}

在更好地支持html5"占位符"之前，这里有一个新颖而简单的简单登录表单想法：我们都知道你不能将密码字段更改为文本，所以显示默认文本很棘手，或者你需要另一个隐藏的输入框。

为什么不使用背景图像？？在焦点设置为无，然后在模糊时，如果值为空，则将其放回。非常简单且支撑良好。唯一的缺点是，默认文本不是文本，而是图像。就可用性而言，我想不出会有什么负面影响。

谢谢Garry。为了消除用户键入默认文本和淡化默认文本之间的时间滞后，您可以将上面给出的焦点功能替换为以下功能

function focus() {
        if ($(this).val()) hide();
        else show();
    };

它消除了时间滞后。。。。。。。。。

我只需要使用HTML5占位符属性。

Twitter实际上使用跨度和样式来代替输入文本框占位符，并使用javascript将它们删除在输入框的焦点上。

最简单的方法是使用带有modernizr跨浏览器回退的HTML5占位符。

<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });
}
</script>

要更改占位符的样式，可以执行以下操作。

input[placeholder]:focus {
  // change style of placeholder on focus
}