我如何才能达到与twitter的登录表单(右上角)相同的效果?当你点击用户名/传递值时,"username"会一直保持在那里,直到你输入文本?而且它有点暗淡。
谢谢!
我已经编写了一个插件来实现这一点,但找不到任何使用类似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
}