Question

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

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

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

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

我想隐藏占位符当我点击按钮隐藏并在我点击按钮show时显示占位符。我用google搜索了，我知道可以通过使用css来做，但我仍然可以找不到任何解决方案。任何人都可以帮我使用jquery或css或其他什么？非常感谢您回答我的问题。

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

Answer 2

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

Answer 3

也许这样的事可以帮到你？

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

P.S ：未经过测试

Answer 4

Jquery：

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

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

Answer 5

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

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

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

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

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

Answer 9

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

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

9 个答案: