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

【问题标题】：How do I auto-hide placeholder text upon focus using css or jquery?如何使用 css 或 jquery 在焦点上自动隐藏占位符文本？
【发布时间】：2012-03-31 05:03:35
【问题描述】：

这对于除 Chrome 之外的所有浏览器都会自动完成。

我猜我必须专门针对 Chrome。

有什么解决办法吗？

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

亲切的问候。

【问题讨论】：

  • 然后检查我的编辑，它可能会有所帮助
  • Opera 也是另一个在焦点上删除占位符的浏览器。
  • Firefox 从版本 15 开始在您开始输入之前不再删除占位符文本。我相信 IE10 可能也是如此，但我没有办法验证这一点。
  • 我担心没有人提到您不应该费心修改本机浏览器行为这一事实。我个人更喜欢占位符仍然存在。它只是帮助我作为最终用户，它是浏览器现在开始实现的功能......可能是因为焦点消失行为被证明是一个可用性问题。请让浏览器运行。
  • "除 Chrome 之外的所有浏览器都会自动完成此操作。"不再？我刚刚在 Firefox 37.0.2、Safari 7.1.5 和 Chrome 42.0 的 OSX 上尝试过这个。在我开始输入之前，他们都不会删除占位符文本，当我清除该字段时，他们都会将其放回原处。

标签： jquery css html google-chrome placeholder


【解决方案1】：

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

input:focus::placeholder {
  color: transparent;
}
<input type="text" placeholder="Type something here!">

Firefox 15 和 IE 10+ 现在也支持此功能。扩展 Casey Chu 的 CSS solution:

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

【讨论】：

  • 很好的答案！我认为放弃我的旧 jQuery 解决方案以支持 HTML5 并继续并重新添加 JavaScript 作为修复没有多大意义。这正是我正在寻找的解决方案。
  • @MartinHunt 你在 FF 上试过吗？输入：焦点：：-moz-占位符
  • 抱歉挖掘了一个旧线程，但只是为了让这个更完整：input:focus:-moz-placeholder 适用于 Firefox 18 及以下版本，对于 19 及以下版本，您需要使用：input:focus ::-moz-placeholder（注意双冒号）。参考：css-tricks.com/snippets/css/style-placeholder-text
  • 这条评论很成功。与动态控件一起使用，例如剑道
  • 我的回答也很棒！对于我们这些在字段被禁用时可能还需要此功能的人，这里是 CSS 代码：/* 在禁用保持字段时隐藏占位符文本（如果有）*/ input:disabled::-webkit-input-占位符 { 颜色：透明； } 输入：禁用：-moz-placeholder { 颜色：透明； } 输入：禁用::-moz-placeholder { 颜色：透明； } 输入：禁用：-ms-input-placeholder { 颜色：透明； }
【解决方案2】： 
<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

【讨论】：

  • 这样就可以了，但是当我点击离开该字段时它仍然是空白的。
  • @LondonGuy：刚刚编辑了我的帖子，看看它是否如你所愿。但是 Toni Michel Caubet 解决方案更好
  • 这里的问题是这是突兀的 JavaScript。 Toni Michel Caubet 的解决方案更好。
  • 我喜欢，可惜IE和Safari都不行。
  • 不工作。 stackblitz.com/edit/angular-jd2l6y-frudzk?file=app/…
【解决方案3】：

这是一个纯 CSS 的解决方案（目前仅适用于 WebKit）：

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

【讨论】：

  • 我喜欢这个答案，但是浏览器还不支持这个。
  • 非常感谢您提供如此优雅的解决方案，让您从逻辑中解放出来。
【解决方案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 */
<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>

修订

  • Edit 1 (2017)：更新以支持现代浏览器。
  • Edit 2 (2020)：添加了可运行的堆栈片段。

【讨论】：

  • 最好的 CSS 解决方案！
  • 好旧的 CSS... 非常简单的解决方案！我怎么没想到呢？？
【解决方案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/

【讨论】：

  • 很高兴看到正在使用的数据属性。但我会看一下 CSS 等价物。缓存后，它将是一个更快的解决方案，并且可以是全局的。以上需要将 data 属性放置在所需的每个元素上。 （下面回答）
  • 这太复杂了。可以用更少的代码来完成。
  • @JGallardo 给我看灯（但我不确定你是否看到有 3 种不同的解决方案）
【解决方案6】：

为了增加@casey-chu 和海盗抢劫的答案，这里有一个更跨浏览器兼容的方式：

    /* 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; }

【讨论】：

  • 正是我现在写的（而不是我使用opacity:0;）！该线程中唯一的 CSS 解决方案，具有所有可能的浏览器支持！
【解决方案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'));
    });
})

Demo.

【讨论】：

【解决方案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'));
        });
    });
};

【讨论】：

    【解决方案9】：

    有时您需要 SPECIFICITY 以确保您的样式应用最强大的因素id 感谢@Rob Fletcher 的出色回答，在我们公司中我们使用过

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

    【讨论】：

      【解决方案10】：

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

      【讨论】：

        【解决方案11】：

        进一步完善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'));
      });
})

        这可确保每个输入在数据属性中存储正确的占位符文本。

        查看working example here in jsFiddle。

        【讨论】：

          【解决方案12】：

          我喜欢带有过渡的 css 方法。在焦点上，占位符淡出；）也适用于文本区域。

          感谢@Casey Chu 的好主意。

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

          【讨论】：

            【解决方案13】：

            将 SCSS 与 http://bourbon.io/ 结合使用，此解决方案简单、优雅，适用于所有网络浏览器：

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

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

            【讨论】：

              【解决方案14】：

              这段 CSS 对我有用：

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

}

              【讨论】：

              • 这是一个不用 JQuery 的好方法 :)
              【解决方案15】：

              对于纯基于 CSS 的解决方案： 

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

              注意： 尚未得到所有浏览器供应商的支持。

              参考：Hide placeholder text on focus with CSS Ilia Raiskin。

              【讨论】：

                【解决方案16】：

                HTML：

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

                jQuery：

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

                【讨论】：

                • 这仅假设一个输入。
                【解决方案17】：

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

                【讨论】：

                  【解决方案18】：

                  演示在这里：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[placeholder]") 而不是只选择具有占位符属性的字段。
                  • 这是最佳答案，简单，失焦时取消选择其他
                  【解决方案19】：

                  输入

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

                  【讨论】：

                    【解决方案20】： 
                    $("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

                    【讨论】：

                      【解决方案21】： 
                      $("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");
    });
});

                      【讨论】：

                        【解决方案22】：

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

                        例如，在下面的邮箱中，点击里面占位符文字会消失，点击外面文字会再次出现。

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

                        【讨论】：

                          【解决方案23】：

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

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

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

                          【讨论】：

                            【解决方案24】：

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

                            您可以添加一个模仿占位符的元素。然后使用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，我的英语很差。希望能解决你的问题。

                            【讨论】：

                            • 请查看URL，这将有助于提升您的内容质量；
                            【解决方案25】：

                            试试这个功能：

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

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

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

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

                            【讨论】：

                              【解决方案26】：

                              我在 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;
}

                              【讨论】：

                                【解决方案27】： 
                                /* 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; }

                                【讨论】：

                                • 此答案与上一个答案相同。如果您有什么要添加或改进的，请建议对原始答案进行修改。
                                猜你喜欢
                                • 1970-01-01
                                • 2018-02-16
                                • 1970-01-01
                                • 2015-08-15
                                • 1970-01-01
                                • 2012-09-14
                                • 2013-06-05
                                • 1970-01-01
                                • 2016-09-14
                                相关资源
                                最近更新 更多
                                热门标签
                                Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode