如何在按钮单击事件上隐藏占位符？答案

【问题标题】：How to hide placeholder on a button click event?如何在按钮单击事件上隐藏占位符？
【发布时间】：2016-09-13 03:12:29
【问题描述】：

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

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

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

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

我想在单击按钮时隐藏占位符隐藏并在单击按钮时显示占位符找不到任何解决方案。谁能帮助我使用 jquery 或 css 或其他什么？非常感谢您回答我的问题。

【问题讨论】：

检查小提琴jsfiddle.net/qgqxLo7u
//已有解决方案：enter link description here

标签： javascript jquery html css

【解决方案1】：

此解决方案是纯 css。它以所有输入字段和 onFocus 为目标，使字体颜色透明。

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

【讨论】：

对您的代码进行一些解释会大大改善您的答案。
解决方案是纯css。它以所有输入字段和 onFocus 为目标，它使字体颜色透明。

【解决方案2】：

我正在分享一种纯 javascript 方式来实现相同的目标。 JS（纯）

HTML

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

JS

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

这是您如何仅使用 javaScript 显示/隐藏输入占位符的方法。谢谢！

【讨论】：

【解决方案3】：

您实际上不需要单独的按钮来隐藏和显示。您可以有一个按钮来切换占位符，并且按钮文本会相应地更改。 https://jsfiddle.net/x337ey8p/2/

JS（纯）

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

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

HTML

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

【讨论】：

【解决方案4】：

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

HTML：

<input type="text" name="test" placeholder="testing"/>
<button id="btn-hide" click="hide_text()">Hide</button>
<button id="btn-show" click="show_text()">Show</button>

jQuery:

function hide_text(){
   $('input[placeholder:testing]').hide();
}

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

.show 和 .hide 是 jQuery 函数，用于设置指定控件的显示。

【讨论】：

【解决方案5】：

如果您使用的是 jquery，请使用此代码

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

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

【讨论】：

$("test") 不会选择任何东西
$('input[name="test"]') 如果它也不起作用，你也可以使用它然后给你的文本框的 id 像 id="txt" 然后 $("#txt" ) 它的工作

【解决方案6】：

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

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

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

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

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

【讨论】：

【解决方案7】：

jquery：

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

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

【讨论】：

【解决方案8】：

也许这样的事情可以帮助你？

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

P.S：未测试

【讨论】：

【解决方案9】：

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

var placeholder = $('#txtInput').attr('placeholder');

$('#btn-hide').on('click', function() {
	$('#txtInput').attr('placeholder' ,'');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtInput" type="text" name="test" placeholder="testing">
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>

【讨论】：