Question

注意占位符如何在Stackoverflow上工作，询问问题标题并在Twitter的注册表单上：https://twitter.com/signup

占位符有两种状态：

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

有没有人知道支持这个的jQuery插件？我见过jQuery占位符插件支持＃1，但不支持＃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（）;）
＆LT; 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

});

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

3 个答案: