2

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

我也需要在 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);
     }
  });
    });
4

7 回答 7

3

使用占位符属性：

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

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

于 2013-01-15T14:14:42.993 回答
3

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

jQuery Placeholder。HTML

下代码的 jsFiddle 现场演示

<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。

于 2013-01-15T14:35:07.577 回答
2

老而不是最好的方法是：

<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 中也有效。

于 2013-01-15T14:35:38.313 回答
2

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

input:focus::-webkit-input-placeholder, 
input:focus::-moz-placeholder { opacity:0; }
于 2013-01-15T15:07:09.523 回答
0

有许多 polyfill 可以在不支持它的浏览器中“添加”占位符功能。我过去使用过jQuery Placeholder，但是在modernizr 文档中提到了很多其他的（向下滚动到占位符部分）。

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

于 2013-01-15T14:27:12.717 回答
0

这是我在输入和 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','');
});
于 2013-04-08T13:30:29.863 回答
0

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

输入焦点

  • 第 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);
});
于 2020-10-01T21:24:06.170 回答