Question

我想在点击时隐藏占位符，但似乎阻止焦点，我尝试添加css input:focus:placeholder ETC. 但没有，这是我的整个代码，请尝试查看是否存在js中的某些内容，这会阻止焦点状态。

Answer 1

当用户开始输入时，placeholder=""属性通常会消失。如果您想在用户开始输入之前隐藏文字，可以使用草稿placeholder pseudo-element。

您可以通过更改占位符的文字颜色来隐藏文字。

/* Chrome/Safari/Opera */
input[type="text"]:focus::-webkit-input-placeholder {
    color: transparent;
}

/* Firefox */
input[type="text"]:focus::-moz-placeholder {
    color: transparent;
}

/* Internet Explorer */
input[type="text"]:focus:-ms-input-placeholder {
    color: transparent;
}

/* Edge */
input[type="text"]:focus::-ms-input-placeholder {
    color: transparent;
}

正如@Shaggy指出的那样，我没有包含::placeholder而没有任何特定于浏览器的前缀：

input[type="text"]:focus::placeholder {
    color: transparent;
}

在这个阶段，我不知道哪个（如果有的话）浏览器支持这个没有浏览器前缀。 Can I Use表示每个浏览器都需要一个前缀，因为此时此伪选择器draft status。但是，如果/当它成为标准的伪选择器时，添加没有前缀的选择器可以在将来证明你的代码。

还有其他选项可以使用JavaScript来更改placeholder=""和onBlur()事件的onFocus()值。

Answer 2

要隐藏输入字段焦点上的占位符，您可以使用onfocus和onblur个事件。

见下面的例子：

＆＃13;

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

＆＃13;

Answer 3

添加：

＆＃13;

ng new project_name
cd project_name
code .\src

＆＃13;

textarea:focus, input:focus
{
    outline: none;
}

＆＃13;

Answer 4

你用JQuery标记了这个问题，但是你并没有包含在你的小提琴中，所以我不确定你是否正在使用它。如果是，请将这些行添加到js中，它将删除焦点上的占位符：

$('input').on('focus',function(){
    $(this).attr('placeholder',"");
});

确保将它包装在document.ready函数中（$（函数（）...在JQuery中）。这是一个小提琴：

http://jsfiddle.net/4tt77a65/

专注于点击不起作用

4 个答案: