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

Question

注意占位符是如何处理堆栈溢出的，问一个问题标题和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插件站点 或从 项目之家 E 111(演示和文档可用)E 212获得它。

Answer 2

您可以尝试持久占位符方法(包括小提琴)。它使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

});