Ẩn văn bản bên trong phần tử nhập

Question

Tôi có kiểu nhập văn bản và tôi muốn ẩn văn bản bên trong, trên một sự kiện cụ thể (Tôi vô hiệu hóa đầu vào, khi không cần). Tôi muốn hiển thị văn bản ẩn, khi sự kiện đã cho được đảo ngược.

Tôi biết tôi có thể lưu trữ giá trị và truy xuất khi cần. Tôi muốn tránh di chuyển dữ liệu, vì đây là một hoạt động hoàn toàn mỹ phẩm.

Văn bản đầu vào có thể bị ẩn hoặc đang thao tác dữ liệu trong đầu vào theo cách duy nhất không? Tôi muốn giải pháp đơn giản nhất.

Tôi có thể sử dụng JS và jQuery thuần túy.

Answer 1

Tôi sẽ sử dụng "giá trị" thuộc tính của đối tượng đầu vào tương tự, kể từ khi thuộc tính là giá trị mặc định. Trong trường hợp này, bạn thậm chí không cần bất kỳ biến bổ sung nào. Ý tưởng về cách tiếp cận này xuất phát từ sự khác biệt giữa các thuộc tính và thuộc tính. Nó có nghĩa là nếu bạn thay đổi thuộc tính value của đối tượng, giá trị thuộc tính vẫn giữ nguyên như trước đây.

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

Ví dụ về cách lưu trữ giá trị của phần tử đầu vào bên trong tập dữ liệu của phần tử.

và hiển thị/ẩn nó khi di chuột.

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