占位符删除焦点

Question

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

我也需要在 IE 化身中具有此功能。

我希望占位符隐藏在 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

如果你不想使用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 2

使用占位符属性：

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

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

Answer 3

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

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

Answer 4

旧而不是最好的方法是：

<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 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）在输入获得焦点时隐藏占位符，当输入失去焦点并且为空时显示占位符。

输入.焦点

• 第 1 步：简单地将占位符值保存到通用变量中（此处为 pl）
• 第 2 步：将输入的占位符属性设置为 ''

input.focusout

• 步骤一：将输入的占位符属性设置为保存的变量（此处为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);
  });