Question

我正在使用“占位符”attr。对于输入字段中的占位符文本

我也需要在IE-incarnations中拥有此功能。

我希望占位符隐藏在FOCUS上！我发现的每个解决方法都会在输入第一个类型时隐藏占位符。

我自己无法解决问题，它只需要在焦点上删除输入的占位符文本，但如果输入值为空，还可以在模糊处恢复占位符文本。

我试图将其付诸实践

jQuery(document).ready(function () {

jQuery('[placeholder]').focus(function() {
  input = jQuery(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
    input.attr('placeholder','')
  }
}).blur(function() {
  var input = jQuery(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  jQuery(this).find('[placeholder]').each(function() {
    var input = jQuery(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});


});

这会将占位符的值更改为“（无）”并且行为符合我的要求但是在模糊时它无法恢复占位符值，因为它的“（无）”现在

//更新

我的解决方案：

$(function()
{
  $('input').each(function() 
  {
     $(this).val($(this).attr('holder'));
  });

  $('input').focus(function()
  {
    if($(this).attr('holder')==$(this).val())
    {
      $(this).val('');
    }
  });
  $('input').focusout(function()
  {
     if($.trim($(this).val())=='')
     {
       var holder = $(this).attr('holder');
       $(this).val(holder);
     }
  });
    });

Answer 1

使用占位符属性：

<input type="text" placeholder="Search here">

对于不支持placeholder的浏览器;你可以使用polyfill

Answer 2

如果您不想使用placeholder，可以使用下面的代码或使用这个简单的jQuery插件：

jQuery Placeholder。

jsFiddle Live Demo Of Code Below

的 HTML

<input type='text' holder='First name'><br> <input type='text' holder='Last name'><br> <input type='text' holder='Age'>

的的JavaScript

$(function() { $('input').each(function() { $(this).val($(this).attr('holder')); }); $('input').focus(function() { if($(this).attr('holder')==$(this).val()) { $(this).val(''); } }); $('input').focusout(function() { if($.trim($(this).val())=='') { var holder = $(this).attr('holder'); $(this).val(holder); } }); });

你也可以使用这个简单的jQuery插件：jQuery Placeholder。

Answer 3

旧而不是最好的方法是：

<input type="text" name="fname" value="Enter text here" onFocus="if (this.value=='Enter text here'){this.value='';}"
onBlur="if (this.value==''){this.value='Enter text here';}" />

但它甚至可以在IE6中使用。

Answer 4

对于基于Webkit的浏览器和Firefox，您可以在纯CSS中隐藏占位符：

input:focus::-webkit-input-placeholder, 
input:focus::-moz-placeholder { opacity:0; }

Answer 5

有一些polyfill会在不支持它的浏览器中“添加”占位符功能。我过去曾使用jQuery Placeholder，但modernizr docs中提到了很多其他内容（向下滚动到占位符部分）。

关于jQuery Placeholder的好处是除了对库的引用之外，你不必更改/添加任何代码。只需将placeholder属性添加到元素中即可。

Answer 6

这是我在输入和textarea focus（）上隐藏占位符文本的代码。简单而有效。

$('textarea,input').focus(function(e){
    val=$(this).attr('value');
    if (!val)
    $(this).attr('value',' ');
    this.select();
}).blur(function(e){
    val=$(this).attr('value');
    if (val==' ')
    $(this).attr('value','');
});

Answer 7

当输入获得焦点时，输入失去焦点且为空时，我使用这两种方法（jquery）隐藏占位符。

input.focus

第1步：只需将占位符值保存到通用变量（此处为pl）
步骤2：将输入的占位符属性设置为”

input.focusout

步骤1：将输入的占位符属性设置为已保存的变量（此处为pl）

 var pl;
//on getting focus
$('input').focus(function(){
  pl=$(this).prop('placeholder');
  $(this).prop('placeholder','');
});
// on losing focus:
$('input').focusout(function(){    
  $(this).prop('placeholder',pl);
});

占位符删除焦点

7 个答案: