JavaScript 文字輸入框失焦後保留文字顯示：與背景圖片融合的簽名欄實作

效果說明

類似 QQ 個性簽名：文字框有背景圖片，使用者輸入文字後，滑鼠離開輸入框，輸入的字體仍保留在畫面上，並與背景融合。

實作思路

1. 將真正的輸入框（input）隱藏或設為透明。
2. 在背景圖片上方建立一個顯示用的文字區塊。
3. 當使用者在輸入框輸入文字並失焦（blur）時，將輸入值複製到顯示區塊。
4. 透過 CSS 絕對定位讓文字與背景圖片對齊。

程式碼概念

<div style="position:relative; background:url(bg.jpg);">
  <input type="text" id="realInput" style="opacity:0; position:absolute; top:0; left:0;" />
  <div id="displayText" style="position:absolute; top:0; left:0; color:#fff;"></div>
</div>

<script>
document.getElementById('realInput').addEventListener('blur', function() {
    document.getElementById('displayText').textContent = this.value;
});
</script>