Javascript 如何隐藏按钮单击事件上的占位符？

我有一个带有占位符的输入文本字段及其值，如下所示：

<input type="text" name="test" placeholder="testing">

我有两个按钮，一个用于隐藏，另一个用于显示占位符：

<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>

隐藏
显示

---

我想在单击按钮时隐藏占位符在单击按钮显示时隐藏并显示占位符。我在谷歌上搜索过，我知道使用css可以做到这一点，但我仍然找不到任何解决方案。有人能帮我使用jquery或css或其他什么吗？非常感谢您回答我的问题。

此解决方案是纯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+ */

---

如果您不想使用jQuery解决方案。将占位符保存在全局变量中，以便可以重置它

var placeholder=$（'#txtInput'）.attr（'placeholder'）；
$（'#btn hide'）。在（'click'，function（）上{
$（'#txtInput'）.attr（'占位符'，''）；
});
$（'#btn show'）。在（'单击'，函数（）上）{
$（'#txtInput'）.attr（'占位符'，占位符）；
});

隐藏
Show
也许这样的东西可以帮助你

$("#btn-hide").click(function(){
   $("input[name='test']").attr("placeholder"," ");
});
$("#btn-show").click(function(){
   $("input[name='test']").attr("placeholder","testing");
});

p.S：它未经测试
Jquery:

$('#btn-hide').click(function(){
  $('input').removeAttr('placeholder');
})

$('#btn-show').click(function(){
  $('input').attr('placeholder','testing');
})

您可以使用jquery删除和添加属性

$('#btn-hide').on('click', function(){

    $('input[name="test"]').removeAttr("placeholder")
})

$('#btn-show').on('click', function(){

    $('input[name="test"]').attr("placeholder", 'text')
})

如果您使用的是jquery，只需使用以下代码

 $("#btn-hide").click(function () {
        $("[name=test]").removeAttr("placeholder");
  });

  $("#btn-show").click(function () {
        $("[name=test]").attr("placeholder","testing");
  });

您需要创建jquery/javascript函数来显示或隐藏控件

HTML:

.show和.hide是jQuery函数，用于设置指定控件的显示。
实际上，隐藏和显示不需要单独的按钮。您可以使用一个按钮切换占位符，按钮文本也会相应更改

JS（纯）

HTML

<input id="test1" type="text" name="test" placeholder="testing">
<button id="btn-show" onclick="togglePlaceholder(this)">Hide</button>


隐藏
我正在分享一种纯javascript的方法来实现同样的效果。
JS（纯）

HTML

这就是仅使用javaScript显示/隐藏输入占位符的方式。
谢谢
 检查fiddle//已经有解决方案：$（“test”）不会选择任何东西$（'input[name=“test”]）你也可以使用它，如果它也不起作用，那么给你的文本框id像id=“txt”然后$（“#txt”），关于你的代码的工作说明会大大改善你的答案。解决方案是纯css。它以所有输入字段为目标，并在焦点上使字体颜色透明。
function hide_text(){
   $('input[placeholder:testing]').hide();
}

function show_text(){
   $('input[placeholder:testing]').show();
}

function togglePlaceholder(btn) {
    var tb = document.getElementById('test1');

    if (tb.placeholder != '') {
       tb.placeholder = '';
       btn.innerHTML = 'Show';
    }
    else {
      tb.placeholder = 'testing';
      btn.innerHTML = 'Hide';
    }
}

<input id="test1" type="text" name="test" placeholder="testing">
<button id="btn-show" onclick="togglePlaceholder(this)">Hide</button>

<input id="inputId" type="text" name="test" placeholder="testing">
<button id="btn-hide" onclick ='hidePlaceholder()'>Hide</button>
<button id="btn-show" onclick ='showPlaceholder()'>Show</button>

var placeholderVal;
function hidePlaceholder(){
     placeholderVal = document.getElementById("inputId").placeholder;
     document.getElementById("inputId").placeholder = "";
}
function showPlaceholder(){
     document.getElementById("inputId").placeholder = placeholderVal;
}