Hide text inside input element

Question

I have text input, and I want to hide the text inside, on this event (I will disable input when it is not needed). I would like to display hidden text when this event is canceled.

I know that I can store the value and retrieve as needed. I would like to avoid moving data, since this is a purely cosmetic operation.

Is it possible to hide introductory text or manage input data in the only way? I would like the simplest solution. ??

I can use pure JS and jQuery.

Answer 1

I would use the value attribute of the same input object, since the attribute is the default value. In this case, you do not even need additional variables. The idea of ​​this approach comes from the difference between properties and attributes. This means that if you change the property property of an object, the attribute value remains the same as before.

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

An example of how to store the value of an input element inside an element dataset.

and show / hide it on 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" />