Wie kann der Platzhalter bei einem Klickereignis ausgeblendet werden?

Question

Ich habe ein Eingabetextfeld mit Platzhalter und seinem Wert, wie unten gezeigt:

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

und ich habe zwei Tasten wird eines verwendet zu verbergen und ein anderes verwendet wird, um den Platzhalter zu zeigen:

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

Ich möchte den Platzhalter ausblenden, wenn ich auf die Schaltfläche Verbergen und zeige den Platzhalter klicken, wenn ich auf den Button zeige.Ich habe gegooglet und ich weiß, dass es möglich ist, mit CSS zu tun, aber ich kann es immer noch nicht finde eine Lösung. Kann jemand mir helfen, entweder jquery oder css oder was auch immer zu benutzen? Vielen Dank für die Beantwortung meiner Frage.

Answer 1

Wenn Sie jQuery Lösung wollen. Speichern Sie Ihren Platzhalter in einer globalen Variable, damit Sie ihn zurücksetzen können.

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

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

 
$('#btn-show').on('click', function() { 
 
\t $('#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 2

Diese Lösung ist reines CSS. Es zielt auf alle Eingabefelder ab und onFocus macht die Schriftfarbe transparent.

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 3

Vielleicht helfen Sie so etwas wie dies?

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

PS: Es ist nicht

Answer 4

JQuery getestet:

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

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

Answer 5

Sie entfernen und attrbiute mit jquery

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

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

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

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

Answer 6

hinzufügen können, wenn Sie jQuery verwenden nur diese verwenden Code

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

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

Answer 7

Sie müssen eine jquery/javascript-Funktion erstellen, um Ihre Steuerelemente ein- oder auszublenden.

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 und .Hide ist jQuery-Funktion, die die Anzeige der angezeigten Steuerung eingestellt wird.

Answer 8

Sie brauchen eigentlich keine separaten Tasten zum Ausblenden und Anzeigen. Sie können eine einzelne Schaltfläche verwenden, die den Platzhalter wechselt, und der Text der Schaltfläche wird entsprechend geändert. https://jsfiddle.net/x337ey8p/2/

JS (rein)

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

ich eine reine Javascript Art und Weise teilen bin, das gleiche zu erreichen. JS (rein)

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

Dies ist, wie Sie/verbergen Platzhalter eines Eingangs nur mit Hilfe von JavaScript zeigen. Danke!