如何使用css或jquery在焦点上自动隐藏占位符文本？

Question

除Chrome之外,每个浏览器都会自动完成此操作.

我猜我必须专门针对Chrome.

有解决方案吗

如果没有CSS,那么使用jQuery？

Answer 1

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+ */

Answer 2

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

Answer 3

这是一个仅限CSS的解决方案(目前仅适用于WebKit):

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

Answer 4

纯CSS解决方案(不需要JS)

在@Hexodus和@Casey Chu的答案的基础上,这是一个更新的跨浏览器解决方案,它利用CSS不透明度和过渡来淡化占位符文本.它适用于可以使用占位符,包括任何元素textarea和input标签.

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

编辑:已更新以支持现代浏览器.

Answer 5

你试过占位符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/

Answer 6

为了增加@ casey-chu和pirate rob的答案,这里有一个更加跨浏览器兼容的方式:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

Answer 7

Toni的答案很好,但我宁愿放弃ID并明确使用input,这样所有输入都placeholder可以获得行为:

<input type="text" placeholder="your text" />

请注意,这$(function(){ });是以下的简写$(document).ready(function(){ });:

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

演示.

Answer 8

我喜欢在名称空间中打包它并使用"占位符"属性运行元素...

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

Answer 9

有时你需要SPECIFICITY以确保你的风格应用最强的因素id感谢@Rob Fletcher的出色答案,在我们公司我们使用过

因此,请考虑添加前缀为app容器ID的样式

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }

Answer 10

使用 Pure 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;
  }

Answer 11

Angular 任何版本

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

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

并在课堂输入中使用

<input class="hide_placeholder"