jQuery的占位符，显示占位符，直到文本输入

Question

通知占位符是如何工作的＃1问一个问题标题和Twitter的注册表单：https://twitter.com/signup

占位符有两种状态：

1. 没有选择的（示出的占位符）
2. 选定，但0的输入（占位符所示，较亮的颜色）

没有人知道一个jQuery的PL ugin支持这个？我见过支持＃1的jQuery占位符插件，但不支持＃2。

谢谢

Answer 1

这里是一个快速简单的例子，让你开始。

HTML

<input type='text' id='in' value='Enter Something...'> 

的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'); 
    }, 
}); 

好运

编辑：我增加了功能和包装作为一个插件，你可以在Github得到它时，jQuery Plugin Site或从Project Home（演示&文档可用）

Answer 2

您可以尝试persistent placeholders方法（包括jsfiddle）。它使得label标签就像占位符一样工作，以便获得所要求的内容，即文本仍然显示，但在有焦点但没有输入时较亮。

这里的标记示例：

<div class="input-wrapper"> 
    <label for="id_username">Username</label> 
    <input id="id_username" type="text" name="username"> 
</div> 

有一些额外的JS和CSS让它做你想要什么。这与twitter和tumblr的做法非常相似。这种方法的一些不错的副作用是：

• 你永远不必担心占位符文本在表格搞乱数据
• 占位符将在密码领域的工作
• 访问标记

Answer 3

我为自己的项目编写了它，它工作的很好（需要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 

<script type="text/javascript" src="../js/placeholder.js"></script> //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(); 
}); 

<script type="text/javascript" src="../js/placeholder.js"></script> // 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 

});