当用户输入/删除时，文本字段中的提示消失/重新出现
有谁知道如何在我的搜索栏中产生这样的效果： https ： //www.dropbox.com/help
我的意思是onFocus和onBlur效果，文字消失并动态显示。
谢谢大家！
他们在color属性上使用CSS动画：
摘自他们的main.css ：
.sick-input.focused label{ color:#ccc;transition:color .2s linear 0; -webkit-transition:color .2s linear 0; -moz-transition:color .2s linear 0 }
您可以使用前面提到的定义在输入字段上使用:focus伪选择器来模拟效果。
如果由于某种原因我不够清楚:)
更强大的解决方案
更新（正确的颜色变化）：
资源：
HTML
CSS
input { color:#333; } input:focus { color:#ccc;transition:color .2s linear 0; -webkit-transition:color .2s linear 0; -moz-transition:color .2s linear 0 } input.typing { color:#333; }
脚本
$(function(){ var input = $('input[name="input"]'), defaulttext = input.attr('data-default'); input.val(input.attr('data-default')); input.on('focus', function(){ if(input.val() != defaulttext) input.addClass('typing'); else input.removeClass('typing'); }).on('keydown', function(){ if(defaulttext == input.val()) input.val(''); input.addClass('typing'); }).on('blur', function(){ if(input.val() == '') input.val(defaulttext); that.removeClass('typing'); }); });
试试这个 – 使用Dropbox网站上的HTML和CSS ….
HTML：
CSS：
.sick-input label { font-size: 16px; position: absolute; left: 8px; top: 6px; cursor: text; pointer-events: none; color: #777; } .sick-input.populated label { display: none; } input { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -moz-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; -webkit-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; font-size: 16px; border: 1px solid #BFBFBF; padding: 5px; width: 500px; } .sick-input.focused label { color: #ccc; transition: color .2s linear 0; -webkit-transition: color .2s linear 0; -moz-transition: color .2s linear 0; }
JavaScript：
$('#search-input').keyup(function() { if ($(this).val() === '') { $('.sick-input').removeClass('populated'); } else { $('.sick-input').addClass('populated'); } }) $('#search-input').focus(function() { $('.sick-input').addClass('focused'); }); $('#search-input').blur(function() { $('.sick-input').removeClass('focused'); });
这里的工作示例
这是一个例子：
HTML
CSS
body { padding: 20px; } div { position: relative; } div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; } div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; } .populated label { display: none; }
使用Javascript
$('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } });
如果您不想使用placeholder属性，请使用以下命令 ：
HTML
使用Javascript
$('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } }).on('focus', function(e) { var $this = $(this); if($this.val() == $this.data('placeholder')) { $this.val(''); } }).on('blur', function(e) { var $this = $(this); if($this.val() == '') { $this.val($this.data('placeholder')); } }).data('placeholder', $('input').val());
如果您不想使用input字段的value属性，那么这可能会有所帮助：
HTML
CSS
body { padding: 20px; } div { position: relative; } div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; } div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; } .populated label { display: none; } .focused label { color: #aaa; }
使用Javascript
$('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } }).on('focus', function(e) { $('div').addClass('focused'); }).on('blur', function(e) { $('div').removeClass('focused'); });
您还可以使用html5占位符=“”属性，该属性具有类似的效果。
并使用旧版浏览器的jquery后备： https ： //github.com/mathiasbynens/jquery-placeholder
你能试试吗？
Javascript代码
function txtblur() { document.getElementById('txtval').value=""; } function textblur() { document.getElementById('txtval').value="Enter word to search"; }
HTML文本框代码
如果已知高度或宽度，您还可以将包含所需文本的背景图像精灵设置到输入字段，并调整onfocus和onblur事件的背景位置。