用纯CSS，它为我工作。使它在输入/聚焦时透明

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

你试过占位符attr吗?

<input id ="myID" type="text" placeholder="enter your text " />

编辑- - - - - -

我明白了，那就试试这个:

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

测试:http://jsfiddle.net/mPLFf/4/

编辑- - - - - -

实际上，由于占位符应该用来描述值，而不是输入的名称。我建议以下替代方案

html:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

javascript:

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

css:

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

测试:

http://jsfiddle.net/kwynwrcf/

任何版本的Angular

只需将其添加到.css文件中

.hide_placeholder:focus::placeholder {
  color: transparent;
}

在课堂上使用

<input class="hide_placeholder"

为了进一步细化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中可以看到一个工作示例。

试试这个函数:

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

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

重点:它向元素添加了一个属性“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;

}