这是自动完成的每个浏览器,除了Chrome。

我猜我必须专门针对Chrome。

有解决方案吗?

如果不是用CSS,那么用jQuery?


当前回答

编辑: 现在所有浏览器都支持

输入:重点::占位符{ 颜色:透明; } <input type="text" placeholder="在这里输入内容!">

Firefox 15和IE 10+现在也支持这个功能。要扩展Casey Chu的CSS解决方案:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

其他回答

不需要使用CSS或JQuery。您可以直接从HTML输入标记执行此操作。

例如,在下面的邮箱中,点击里面的占位符文字会消失,点击外面的文字会重新出现。

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

为了进一步细化Wallace Sidhrée的代码示例:

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

这确保每个输入在data属性中存储正确的占位符文本。

在jsFiddle中可以看到一个工作示例。

编辑: 现在所有浏览器都支持

输入:重点::占位符{ 颜色:透明; } <input type="text" placeholder="在这里输入内容!">

Firefox 15和IE 10+现在也支持这个功能。要扩展Casey Chu的CSS解决方案:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

试试这个函数:

+它隐藏占位符在焦点上,并返回它在模糊

+这个函数依赖于占位符选择器,首先它选择具有占位符属性的元素,触发一个聚焦函数,另一个模糊函数。

重点:它向元素添加了一个属性“data-text”,该属性从占位符属性中获取其值,然后它删除了占位符属性的值。

在模糊:它返回占位符值,并从数据文本属性中删除它

<input type="text" placeholder="Username" />
$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

如果您通过检查输入元素来了解幕后发生的事情,您就可以很好地理解我的意思

下面这段CSS对我来说很有用:

input:focus::-webkit-input-placeholder {
        color:transparent;

}