如何使用HTML、CSS和jQuery建立一個動態的輸入框效果

如何使用HTML、CSS和jQuery創建一個動態的輸入框效果

在現代網頁設計中，動態效果可以增加使用者與網站的互動性和體驗感。其中，動態輸入框效果是一種非常常見的互動設計。本文將介紹如何使用HTML、CSS和jQuery來建立一個動態的輸入框效果，並提供具體的程式碼範例。

首先，我們需要建立一個基本的HTML結構來實現輸入框效果。在HTML中，我們可以使用<div>元素來表示輸入框的樣式，並透過CSS來設定其外觀。程式碼如下：<pre class='brush:html;toolbar:false;'>&lt;div class=&quot;input-box&quot;&gt; &lt;input type=&quot;text&quot;&gt; &lt;span class=&quot;underline&quot;&gt;&lt;/span&gt; &lt;/div&gt;</pre><p>接下來，我們需要使用CSS來設定輸入框的樣式。可設定輸入框的寬度、高度、邊框樣式、背景顏色等屬性。同時，我們也可以設定輸入框中的底線樣式。具體的CSS程式碼如下：</p><pre class='brush:css;toolbar:false;'>.input-box { position: relative; width: 200px; height: 30px; border-bottom: 1px solid #ccc; } .input-box input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; outline: none; background: transparent; } .input-box .underline { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #ccc; transform-origin: center; transform: scaleX(0); transition: transform 0.3s ease; }</pre><p>在上述程式碼中，我們使用了<code>position: absolute來設定輸入框和底線的位置，使用width: 100%和height: 100%來讓輸入框和底線填入整個父元素。

接下來，我們需要使用jQuery來實現動態效果。當使用者輸入內容時，我們可以監聽輸入框的input事件，然後根據輸入的內容來改變底線的寬度。具體的jQuery程式碼如下：

$('.input-box input').on('input', function() {
  var inputWidth = $(this).val().length * 10;
  $('.input-box .underline').css('transform', 'scaleX(' + inputWidth + ')');
});

在上述程式碼中，我們首先監聽輸入框的input事件，然後使用val().length來取得輸入的內容的長度，並乘以一個係數，這裡是10，來計算底線的寬度。最後，使用css方法來設定底線的寬度。

到此，我們已經完成了動態的輸入框效果的建立。使用者在輸入內容時，底線將跟隨輸入內容的長度動態改變。

綜上所述，透過使用HTML、CSS和jQuery，我們可以很方便地建立一個動態的輸入框效果。這種動態效果可以提升使用者的體驗感，並增加網頁的互動性。希望本文對你有幫助。