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

How to hide placeholder on a button click event?

本文关键字：事件 单击 占位符 按钮 何隐藏 隐藏      更新时间：2023-09-26

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

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

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

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

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

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

您可以使用jquery 删除和添加attrbiute

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

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

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

也许这样的东西可以帮助你？

$("#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").click(function () {
        $("[name=test]").removeAttr("placeholder");
  });
  $("#btn-show").click(function () {
        $("[name=test]").attr("placeholder","testing");
  });

您需要创建一个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函数，用于设置所指示控件的显示。

实际上，隐藏和显示不需要单独的按钮。您可以有一个切换占位符的按钮，按钮文本也会相应地更改。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>

我正在共享一种纯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显示/隐藏输入占位符的方法。谢谢

相关文章：