jQuery / javascript - 输入字段（用户，pass）就像twitter的登录？ [英] jQuery/javascript - Input fields (user,pass) just like twitter's login?

问题描述

如何实现与Twitter的登录表单（右侧顶部）相同的效果 - 当您点击用户名/通过值用户名保持在那里，直到您输入文本？

How can I achieve the same effect like twitter's log-in form (the top on the right) - when you click on the username/pass the value "username" stays there until you enter text? Also it's a bit dimmed.

谢谢！

推荐答案

查看工作小提示：如果没有找到任何使用类似twitter的div默认值， http://jsfiddle.net/garreh/nCCPQ/2/

See working fiddle: http://jsfiddle.net/garreh/nCCPQ/2/

// 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};

这篇关于jQuery / javascript - 输入字段（用户，pass）就像twitter的登录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！