Text innerhalb eines Eingabeelements verstecken

Question

Ich habe eine Texteingabe, und ich möchte den Text innerhalb eines bestimmten Ereignisses ausblenden (ich deaktiviere die Eingabe, wenn sie nicht benötigt wird). Ich möchte den versteckten Text anzeigen, wenn das angegebene Ereignis umgekehrt ist.

Ich weiß, dass ich den Wert speichern und bei Bedarf abrufen kann. Ich möchte Daten nicht verschieben, da dies eine rein kosmetische Operation ist.

Kann der eingegebene Text ausgeblendet werden, oder manipuliert die Daten in der Eingabe die einzige Möglichkeit? Ich hätte gerne die einfachste Lösung.

Ich kann reines JS und jQuery verwenden.

Answer 1

würde ich "value" Attribut des gleichen Eingabeobjekt verwenden, da das Attribut der Standardwert ist. In diesem Fall benötigen Sie nicht einmal zusätzliche Variablen. Die Idee dieses Ansatzes ergibt sich aus dem Unterschied zwischen Eigenschaften und Attributen. Wenn Sie die Werteigenschaft des Objekts ändern, bleibt der Attributwert derselbe wie zuvor.

var input = document.querySelector('input'); 
 

 
function hide() { 
 
    input.value = ""; 
 
} 
 

 
function show() { 
 
    input.value = input.getAttribute('value'); 
 
}

<input type="text" value="Some text"> 
 
<button onclick="hide()">Hide</button> 
 
<button onclick="show()">Show</button>

Answer 2

Ein Beispiel, wie der Wert eines Eingabeelements im Dataset des Elements gespeichert wird.

und zeigen/verstecken es bei Hover.

var hello = document.getElementById('hello'); 
 
hello.dataset.value = hello.value; 
 
hello.value = ''; 
 
hello.addEventListener('mouseover', function() { 
 
    hello.value = hello.dataset.value; 
 
}); 
 
hello.addEventListener('mouseout', function() { 
 
    hello.value = ''; 
 
});

<input id="hello" value="Hello World" />