Bagaimana untuk mencipta kesan kotak input dinamik menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan kotak input dinamik

Dalam reka bentuk web moden, kesan dinamik boleh meningkatkan interaksi pengguna dengan Interaktiviti dan pengalaman laman web. Antaranya, kesan kotak input dinamik ialah reka bentuk interaksi yang sangat biasa. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan kotak input dinamik dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta struktur HTML asas untuk mencapai kesan kotak input. Dalam HTML, kita boleh menggunakan elemen <div> untuk mewakili gaya kotak input dan menetapkan penampilannya melalui CSS. Kodnya adalah seperti berikut: <code><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，来计算下划线的宽度。最后，使用cssrrreee

Seterusnya, kita perlu menggunakan CSS untuk menggayakan kotak input. Anda boleh menetapkan lebar, ketinggian, gaya sempadan, warna latar belakang dan atribut lain kotak input. Pada masa yang sama, kita juga boleh menetapkan gaya garis bawah dalam kotak input. Kod CSS khusus adalah seperti berikut:

rrreee

Dalam kod di atas, kami menggunakan position: absolute untuk menetapkan kedudukan kotak input dan garis bawah serta menggunakan lebar: 100% dan height: 100% untuk menjadikan kotak input dan garis bawah mengisi keseluruhan elemen induk.

Seterusnya, kita perlu menggunakan jQuery untuk mencapai kesan dinamik. Apabila pengguna memasukkan kandungan, kita boleh mendengar acara input kotak input, dan kemudian menukar lebar garis bawah berdasarkan kandungan input. Kod jQuery khusus adalah seperti berikut: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kita mula-mula mendengar acara input pada kotak input, dan kemudian gunakan val() .length Untuk mendapatkan panjang kandungan input dan darabkannya dengan pekali, berikut ialah 10, untuk mengira lebar garis bawah. Akhir sekali, gunakan kaedah css untuk menetapkan lebar garis bawah. #🎜🎜##🎜🎜#Pada ketika ini, kami telah menyelesaikan penciptaan kesan kotak input dinamik. Apabila pengguna memasukkan kandungan, garis bawah akan berubah secara dinamik mengikut panjang kandungan input. #🎜🎜##🎜🎜#Ringkasnya, dengan menggunakan HTML, CSS dan jQuery, kami boleh mencipta kesan kotak input dinamik dengan mudah. Kesan dinamik ini boleh meningkatkan pengalaman pengguna dan meningkatkan interaktiviti halaman web. Semoga artikel ini bermanfaat kepada anda. #🎜🎜#