Скрытие текста внутри элемента ввода

Question

У меня есть текстовый ввод, и я хочу скрыть текст внутри данного события (я отключу ввод, когда он не нужен). Я хотел бы отобразить скрытый текст, когда данное событие будет отменено.

Я знаю, что могу хранить значение и извлекать по мере необходимости. Я бы хотел избежать перемещения данных, поскольку это чисто косметическая операция.

Может ли текст ввода быть скрытым или управлять данными на входе единственным способом? Я хотел бы простейшее решение.

Я могу использовать чистые JS и jQuery.

Answer 1

Я хотел бы использовать «значение» атрибута одного и того же объекта ввода, так как атрибут является значением по умолчанию. В этом случае вам даже не нужны дополнительные переменные. Идея такого подхода исходит из разницы между свойствами и атрибутами. Это означает, что если вы изменяете свойство свойства объекта, значение атрибута остается таким же, как и раньше.

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

Пример того, как сохранить значение входного элемента внутри набора данных элемента.

и показать/скрыть его при наведении указателя.

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" />