显示/隐藏占位符文本答案

【问题标题】：Show/Hide placeholder text显示/隐藏占位符文本
【发布时间】：2016-09-14 12:53:11
【问题描述】：

我有几个带有占位符的文本框，例如：

<input class="form-control" id="txtAddress" placeholder="Address" type="text">
<input class="form-control" id="txtZip" placeholder="Zip Code" type="text">

我想在调用SetErrorStateForControl 函数时隐藏这些占位符。

var SetErrorStateForControl = function (elemObj, msg) 
{
    $('<span class="reqDiv" name="Required">' + msg + '</span>').prependTo(elemObj.closest('div'));
    //hide placeholders of all textboxes
}

在焦点上我想把占位符放回去。

$("#Offer_Form").find(".form-control").on("focus", function (e) {
        //Show placeholders back
    });

甚至可以使用 jquery 或 css 隐藏和显示占位符吗？

【问题讨论】：

提供完整代码
@AnkurBhadania 的完整代码如？我不知道如何隐藏和显示占位符，所以我为此添加了 cmets
可能重复stackoverflow.com/questions/30794947/hide-placeholder-with-css
您可以使用 add 或 remove attr() 添加和删除占位符，它会在这里完成您的工作。

标签： jquery css placeholder

【解决方案1】：

HTML：

<input type="text" name="name" placeholder="Enter Text" id="txt1" />

jQuery:

$('#txt1').focus(function(){
  $(this).attr('placeholder','');
});
$('#txt1').focusout(function(){
  $(this).attr('placeholder','Enter Text');
});

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

检查这个。

这可能有助于你理解。

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Place Holder</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
        <div id=Offer_Form>
            <input class="form-control MyClass" id="txtAddress" placeholder="Address" type="text">
            <input class="form-control MyClass" id="txtZip" placeholder="Zip Code" type="text">    
        </div>
    <script type="text/javascript">


        $(document).on("focus" , ".MyClass" , function () {

            $(this).removeAttr('placeholder');

        });

        $(document).on("focusout" , ".MyClass" , function () {

            if($(this).val() == ''){
                $(this).attr('placeholder' , "My PlaceHolder");
            }

        });

    </script>

    </body>
</html>

【讨论】：

添加属性怎么样？我是否需要编写代码以将它们添加回一次或为每个文本框？
编辑了答案，。现在问题是您必须以某种方式确定用户已从地址元素或邮政编码元素中集中注意力。以便您可以相应地添加占位符。
你为什么要给出 2 个答案？？如果第一个不好，那么编辑并合并另一个答案。请合并并帮助制作干净和无垃圾邮件的网站。谢谢

【解决方案4】：

试试这个。

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

li{padding:15px;list-style-type: none;}
input{padding:8px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <ul class="field-set field-set-stacked">
       <li class="field field-text">
           <input type="text" placeholder="Enter your name" />
       </li>
       <li class="field">
           <input type="text" placeholder="Enter your email address" />
       </li>
       <li class="field">
           <input type="text" placeholder="Enter amount" />
       </li>
    </ul>                  
</form>

【讨论】：