如何利用placeholder提升網頁交互體驗？

一、什麼是placeholder？

Placeholder是指HTML5新增的input元素的一個屬性，在表單中用於提供一些文本提示，方便用戶輸入，更為人性化。

同時也有利於提升網頁的交互體驗。因為用戶可以清晰地知道需要輸入什麼內容，降低輸入錯誤的可能性，給用戶提供更好的輸入體驗。

二、如何使用placeholder？

在HTML代碼中，直接在input標籤內添加placeholder屬性，屬性值即為需要提示用戶輸入的文本內容。比如：

  <input type="text" name="username" placeholder="請輸入用戶名">

當用戶點擊輸入框，輸入框內的默認文本就會消失，等到用戶開始輸入時，placeholder內的內容就會隨着輸入內容自動消失。

三、如何修改placeholder的樣式？

默認情況下，placeholder的樣式會與input文本框內的文字保持一致。但是，有時候我們需要給placeholder添加一些特定的樣式，以便它更加醒目。

可以使用CSS樣式來改變placeholder的樣式，下面是一個例子：

  <input type="text" name="username" placeholder="請輸入用戶名" style="color: #999;font-size: 14px;font-weight: normal;">

這裡我們為placeholder添加了顏色、字體大小、以及字體粗細三種CSS屬性，這樣就可以根據需要來為placeholder增加一些定製化的樣式。

四、如何為不支持placeholder的瀏覽器添加placeholder功能？

儘管placeholder已經成為了HTML5的標準屬性，但是在一些老舊的瀏覽器中依舊不支持placeholder屬性。為了給用戶提供更好的交互體驗，我們需要為這些瀏覽器添加placeholder的支持。

這裡我們可以使用JavaScript來實現佔位符文本的效果。下面是一個兼容不支持placeholder的瀏覽器的JavaScript代碼：

  <script>
    var input = document.createElement("input");
    if(('placeholder' in input)==false){
        $('[placeholder]').focus(function(){
            var input = $(this);
            if(input.val() == input.attr('placeholder')){
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function(){
                var input = $(this);
                if(input.val() == '' || input.val() == input.attr('placeholder')){
                    input.addClass('placeholder');
                    input.val(input.attr('placeholder'));
                }
        }).blur();
        $('[placeholder]').parents('form').submit(function(){
            $(this).find('[placeholder]').each(function(){
                var input = $(this);
                if(input.val() == input.attr('placeholder')){
                    input.val('');
                }
            })
        });
    }
  </script>

這裡我們首先檢測當前瀏覽器是否支持placeholder，如果不支持就使用JavaScript來模擬實現。然後我們綁定了focus與blur事件來實現placeholder效果。同時，還支持表單提交時的有效性檢測。

五、如何使用placeholder增強網頁的交互體驗？

除了常規的表單輸入，我們還可以將placeholder運用到圖片、視頻等多種格式的輸入中，從而提升用戶體驗。

如下面的一個例子，當用戶上傳一張圖片時，在上傳按鈕下顯示出圖片的預覽，並且在預覽圖片中增加placeholder的效果，為用戶提供更好的操作體驗：

  <form enctype="multipart/form-data" action="#" method="post">
    <input type="file" name="file" id="file" onchange="previewImage(this)" accept="image/*">
    <input type="submit" name="submit" value="提交">
  </form>
  
  <div>
    <img id="previewImage" src="#" alt="預覽圖片">
    <span id="previewPlaceholder" class="placeholder">這裡將顯示預覽圖片</span>
  </div>
  
  <script type="text/javascript">
    function previewImage(fileObj) {
        if (fileObj.files && fileObj.files[0]) {
            var newImage = document.getElementById('previewImage');
            var reader = new FileReader();
            reader.onload = function (evt) {
                newImage.src = evt.target.result;
            }
            reader.readAsDataURL(fileObj.files[0]);
            $('#previewPlaceholder').removeClass('placeholder');
            $('#previewPlaceholder').html('');
        }else{
            newImage.src = fileObj.value;
        }
    }
  </script>

當用戶選擇了要上傳的圖片之後，圖片預覽的區域就會自動顯示圖片，同時佔位符文本也會立即消失。這樣的實現方式，更讓用戶更加清晰明了地明白當前操作的效果。