div 模擬 placeholder
在 HTML 中，placeholder 屬性可以用來為輸入框提供提示信息，告訴用戶輸入的內容應該是什么。然而，對于 div 元素來說，并沒有提供類似 placeholder 的屬性。但是，我們可以通過使用 CSS 和 JavaScript 來模擬實現 div 元素的 placeholder 效果。
下面將以幾個代碼案例詳細說明如何實現 div 模擬 placeholder 效果。
案例 1：
HTML 代碼：

請輸入內容：

<div contenteditable="true" class="placeholder">這里是placeholder效果</div>
CSS 代碼： <style> .placeholder:before { content: attr(placeholder); color: gray; } </style>
JavaScript 代碼： <script> var divElement = document.querySelector('.placeholder'); divElement.addEventListener('input', function() { if (divElement.textContent !== '') { divElement.classList.remove('placeholder'); } else { divElement.classList.add('placeholder'); } }); </script>
解釋：上面的代碼通過使用 CSS 的 content 屬性和 JavaScript 來實現 div 元素的 placeholder 效果。，div 元素的 contenteditable 屬性被設置為 true，以允許用戶在其中輸入內容。為了實現 placeholder 效果，給 div 元素添加了一個類名為 placeholder 的樣式，通過 CSS 的 ::before 偽元素為其添加提示信息。使用 JavaScript 監聽 div 元素的 input 事件，當用戶有輸入內容時，移除 placeholder 類名，隱藏提示信息；當用戶清空內容時，重新添加 placeholder 類名，顯示提示信息。
案例 2：
HTML 代碼：

請輸入內容：

<div class="placeholder">這里是placeholder效果</div> <textarea class="hidden-input"></textarea>
CSS 代碼： <style> .placeholder { position: relative; z-index: 1; } .hidden-input { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; } </style>
JavaScript 代碼： <script> var divElement = document.querySelector('.placeholder'); var hiddenInput = document.querySelector('.hidden-input'); divElement.addEventListener('click', function() { hiddenInput.focus(); }); hiddenInput.addEventListener('input', function() { divElement.textContent = hiddenInput.value; }); </script>
解釋：上面的代碼通過使用一個隱藏的 textarea 元素來接受用戶輸入，并將其內容實時顯示在 div 元素中，以實現 placeholder 效果。，為 div 元素添加了一個類名為 placeholder 的樣式，并在 CSS 中將其設置為相對定位。然后，在 HTML 中添加了一個隱藏的 textarea 元素，并通過 CSS 將其設置為絕對定位，覆蓋在 div 元素之上，并且設置了透明度為 0。接著，通過 JavaScript 監聽 div 元素的點擊事件，并讓隱藏的 textarea 元素獲得焦點。當隱藏的 textarea 元素接收到用戶的輸入時，通過 input 事件將其內容顯示在 div 元素中，從而實現了 placeholder 效果。
參考實例：
在真實案例中，我們可以參考一些開源項目，如 Bootstrap 中的 input-group-addon 和 Google Material Design 中的 Text Field 組件，它們都提供了已經實現的 div 模擬 placeholder 效果。
：
通過使用 CSS 和 JavaScript，我們可以很容易地實現 div 元素的 placeholder 效果。上述案例提供了兩種實現方式，一種是使用 ::before 偽元素，并監聽 div 元素的 input 事件；另一種是通過一個隱藏的 textarea 元素來接受用戶輸入，并將其內容實時顯示在 div 元素中。無論使用何種方式，都可以在用戶輸入內容前提供一些提示信息，提升用戶體驗。