Comment créer un effet de zone de saisie dynamique en utilisant HTML, CSS et jQuery

Comment créer un effet de zone de saisie dynamique en utilisant HTML, CSS et jQuery

Dans la conception Web moderne, les effets dynamiques peuvent augmenter l'interactivité et l'expérience entre les utilisateurs et le site Web. Parmi eux, l’effet de zone de saisie dynamique est une conception d’interaction très courante. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un effet de zone de saisie dynamique et fournit des exemples de code spécifiques.

Tout d'abord, nous devons créer une structure HTML de base pour obtenir l'effet de zone de saisie. En HTML, nous pouvons utiliser l'élément <div> pour représenter le style de la zone de saisie et définir son apparence via CSS. Le code est le suivant : <code><div>元素来表示输入框的样式，并通过CSS来设置其外观。代码如下：<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div><p>接下来，我们需要使用CSS来设置输入框的样式。可以设置输入框的宽度、高度、边框样式、背景颜色等属性。同时，我们还可以设置输入框中的下划线样式。具体的CSS代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div><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，来计算下划线的宽度。最后，使用cssrrreee

rrreee