这是

除Chrome以外的所有浏览器自动完成的。

我

猜我必须专门针对Chrome。

有什么解决办法吗？

如果不使用 CSS，那么使用 jQuery？

编辑：现在支持所有浏览器

input:focus::placeholder {
  color: transparent;
}

<input type="text" placeholder="Type something here!">

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

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

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

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

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

<div>
  <div><label for="a">Input:</label></div>
  <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60">
</div>
<br>
<div>
  <div><label for="b">Textarea:</label></div>
  <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea>
</div>

修改

编辑 1 (2017(：更新以支持现代浏览器。
编辑 2 (2020(：添加了可运行的堆栈代码段。

你试过占位符吗？

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

为了补充@casey-chu和海盗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; }

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'));
    });
})

演示。

我喜欢将其打包在命名空间中并在具有"占位符"属性的元素上运行......

$("[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'));
        });
    });
};

有时你需要特异性来确保你的风格以最强的因素应用id 感谢弗莱彻@Rob的精彩回答，在我们公司，我们已经使用了

因此，请考虑添加以应用容器 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;
    }

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

为了进一步完善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中的工作示例。

我喜欢带有

过渡色彩的 css 方法。在对焦时，占位符淡出;)也适用于文本区域。

感谢@Casey楚的好主意。

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}
textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

对于一个纯粹的基于CSS的解决方案：

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

注意：并非所有浏览器供应商都支持。

参考：使用 CSS 隐藏焦点上的占位符文本，作者：Ilia Raiskin。

使用 SCSS 和 http://bourbon.io/，此解决方案简单、优雅，适用于所有 Web 浏览器：

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

使用波旁威士忌！这对你有好处！

Angular 任何版本

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

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

并在课堂输入中使用

<input class="hide_placeholder"

这段CSS对我有用：

input:focus::-webkit-input-placeholder {
        color:transparent;
}

HTML：

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

j查询：

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

> 2018> JQUERY v.3.3 解决方案：所有输入的全局工作，带有占位符的文本区域。

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });
     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

如果输入背景颜色为白色，则可以在焦点上设置占位符文本颜色以匹配输入背景 - 使文本不可见; 理论上。如果你输入的是不同的颜色，那么只需更改颜色以匹配它。

input:focus::placeholder {
  color: white;
}

此外，您可以将颜色设置为其他答案中显示的"透明"。

演示在这里： jsfiddle

试试这个：

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });
        });
}

用于

输入

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

对于文本区域

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);
    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

除了以上所有内容，我有两个想法。

您可以添加模仿帕尔塞持有人的元素。然后使用 javascript 控制元素的显示和隐藏。

但是它太复杂了，另一个是使用兄弟的css选择器。就像这样：

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; }

23333，我的英语很差，希望能解决你的问题。

无需使用任何CSS或JQuery。您可以直接从 HTML 输入标签执行此操作。

例如，在下面的电子邮件框中，占位符文本将在内部单击后消失，如果单击外部，文本将再次出现。

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

试试这个函数：

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

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

焦点：它向元素添加一个属性"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', '');
  });
});

如果你通过检查输入元素来观察幕后发生的事情，你可以很好地关注我

我在

angular 5 中应用了同样的东西。

我创建了一个用于存储占位符的新字符串

newPlaceholder:string;

然后我在输入框上使用焦点和模糊功能(我正在使用 Prime NG 自动完成(。

上面的占位符是从打字稿设置的

我正在使用的两个函数 -

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

<</div> div class="one_answers">

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }

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

纯 CSS 解决方案(无需 JS(

修改

相关内容

最新更新

热门标签：