jQuery 占位符，在输入文本之前显示占位符

Question

注意占位符在 Stackoverflow 提问标题和 Twitter 注册表单上的工作方式：https://twitter.com/signup

占位符有两种状态：

1. 未选择（显示占位符）
2. 已选择，但输入为 0（显示占位符，颜色较浅）

有谁知道支持这个的 jQuery 插件吗？我见过支持 #1 但不支持 #2 的 jQuery 占位符插件。

谢谢

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();)

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

});