Hiding Text inside of an input element

Question

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

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

Can the input text be hidden, or is manipulating the data in the input the only way? I would like the simplest solution.y?

I can use pure JS and jQuery.

Answer 1

I would use "value" attribute of the same input object, since the attribute is the default value. In this case you don't even need any additional variables. The idea of this approach comes from the difference between properties and attributes. It means that if you change value property of the object, the attribute value remains the same as it was 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>