javascript - 如何在按钮单击事件中隐藏占位符？

Question

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

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

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

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

我想在单击按钮时隐藏占位符隐藏并在单击按钮显示时显示占位符。我用谷歌搜索了一下，我知道可以使用 css 来实现，但我仍然可以没有找到任何解决方案。谁能帮助我使用 jquery 或 css 或其他什么？非常感谢您回答我的问题。

Answer 1

如果您不想要 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>