jQuery占位符，显示占位符，直到键入文本
注意占位符如何在Stackoverflow上工作，询问问题标题，并在Twitter的注册表单上： https ： //twitter.com/signup
占位符有两种状态：
- 没有选中（显示占位符）
- 已选中，但输入为0（显示占位符，颜色较浅）
有谁知道支持这个的jQuery插件？ 我见过jQuery占位符插件支持＃1，但不支持＃2。
谢谢
这是一个快速简单的例子，可以帮助您入门。
HTML
JavaScript的
$('#in').bind({ click : function() { $(this).css('color','#ccc'); }, focusout : function() { $(this).css('color','#000'); }, keydown : function() { $(this).val(''); $(this).css('color','#000'); $(this).unbind('keydown'); $(this).unbind('click'); }, });
祝好运
编辑：我增加了function并将其打包为插件，您可以在Github ， jQuery插件站点或Project Home （可用的演示和文档）中获取它
您可以尝试持久占位符方法（包括jsfiddle ）。 它使label标签像占位符一样工作，以获得您所要求的内容，即文本仍然显示，但在有焦点但没有输入时更亮。
这是标记的一个例子：
还有一些额外的JS和CSS可以让它做你想要的。 这与twitter和tumblr的表现非常相似。 这种方法的一些好的副作用是：
- 您永远不必担心占位符文本会弄乱表单中的数据
- 占位符将在密码字段中工作
- 可访问的标记
我为自己的项目编写了这个，它工作得很好（需要jQuery）并且非常容易实现。 它实际上比本机占位符支持更好，就像Twitter注册一样。
特征：
- 占位符是灰色文本，在聚焦时变为浅灰色。
- 只要输入字段中没有输入任何内容，就可以使用占位符（删除时显示自己）
- 如果单击占位符中的任何位置，文本光标将转到字段的开头，这意味着您无法突出显示它，或者键入其中间例如
- 通过制表符和鼠标以及输入重用，可以完美地来回移动输入
- 仅在一个或所有输入字段上易于使用（.placeHolder（）;）
- <1kb的
1.将此脚本复制到文本文件中，另存为placeholder.js并上传到您的js目录：
(function( $ ){ $.fn.placeHolder = function() { var input = this; var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field if (text) { input.val(text).css({ color:'grey' }); input.focus(function(){ if (input.val() === text) input.animate({ color:'lightGrey' }, 350).selectRange(0,0).one('keydown', function(){ input.val("").css({ color:'black' }); }); }); input.blur(function(){ if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); }); input.keyup(function(){ if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){ input.val("").css({ color:'black' }); }); }); input.mouseup(function(){ if (input.val() === text) input.selectRange(0,0); }); } }; $.fn.selectRange = function(start, end) { return this.each(function() { if (this.setSelectionRange) { this.setSelectionRange(start, end); } else if (this.createTextRange) { var range = this.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } }); }; })( jQuery );
仅用于一个输入
$('#myinput').placeHolder(); // just one //include this in your header unless you are going to implement the placeholders for just non-HTML5 browsers. In that case see below.
用于所有输入字段
$(":input").each(function(){ // this will work for all input fields $(this).placeHolder(); }); // include in header / change src to your actual js directory
这是我建议您仅在浏览器不支持HTML5占位符属性时在站点的所有输入字段上实现它的方法：
var placeholder = 'placeholder' in document.createElement('input'); if (!placeholder) { // if the browser does not support placeholder, then use this script $.getScript("../js/placeholder.js", function() { // save the above script as placeholder.js $(":input").each(function(){ // this will work for all input fields $(this).placeHolder(); }); }); }
请务必在提交时删除占位符值：
$('#submit').click(function(){ var text = this.attr('placeholder'); var inputvalue = this.val(); // you need to collect this anyways if (text === inputvalue) inputvalue = ""; // $.ajax(... // do your ajax thing here });