cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menggunakan JavaScript untuk menukar sempadan kotak input selepas mengisinya?

Bagaimana untuk menggunakan JavaScript untuk menukar sempadan kotak input selepas mengisinya?

王林
王林ke hadapan
2023-09-09 19:37:021493semak imbas

Sifat

如何使用 JavaScript 填充输入框后更改输入框边框？

style.border digunakan untuk menukar sempadan elemen Ia mengembalikan tiga sifat sempadan bawah elemen, iaitu warna sempadan, gaya sempadan dan lebar sempadan. Ia adalah salah satu sifat objek gaya HTML.

Kami menggunakan acara onchange untuk membuat perubahan berkuat kuasa selepas mengisi kotak. onchange ialah salah satu atribut JavaScript yang berlaku apabila nilai elemen HTML berubah. Ia juga berfungsi dengan butang radio dan kotak semak apabila keadaan yang dipilih berubah.

Acara

onchange juga boleh digunakan dengan elemen

Dalam artikel ini, kita akan belajar cara menukar sempadan kotak input selepas mengisinya menggunakan JavaScript.

Tatabahasa

Berikut ialah sintaks harta style.border untuk menukar sempadan kotak input selepas mengisi kotak -

object.style.border = "width style color|initial|inherit"

Parameter

  • lebar – digunakan untuk menetapkan lebar sempadan. Kita boleh menghantar nilai lebar sebagai Tebal, Nipis, Sederhana atau sebagai nilai dalam px (iaitu 10px).

  • gaya – digunakan untuk menetapkan gaya sempadan. Kita boleh menghantar nilai gaya sebagai "pepejal", "bertitik", "berganda", dsb.

  • warna – digunakan untuk menetapkan warna sempadan.

  • initial – digunakan untuk menetapkan harta kepada nilai lalainya.

  • warisan – digunakan untuk mewarisi harta daripada unsur induk.

Nilai pulangan

StyleBorder mengembalikan nilai rentetan yang mewakili warna, lebar dan gaya sempadan elemen.

Langkah

Selepas mengisi kotak, kita harus mengikuti langkah-langkah yang diberikan di bawah untuk menukar sempadan kotak input -

  • Langkah 1 - Tentukan elemen borang dengan medan input teks dan jenis butang.

  • Langkah 2 - Kod skrip mentakrifkan fungsi menukar sempadan kotak input selepas mengisi kotak.

  • Langkah 3 - Dalam bahagian JavaScript, isytiharkan acara onchange, yang berlaku apabila nilai elemen berubah.

  • Langkah 4 - style.border ialah sifat latar belakang DOM HTML yang digunakan untuk menukar sempadan bawah elemen.

  • Langkah 5 - Setiap kali pengguna menambah beberapa nilai pada nilai input, peristiwa onchange dicetuskan dan apabila peristiwa itu dicetuskan, nilai itu diperiksa sama ada ia adalah batal. Jika nilai wujud dan tidak kosong, bahagian bawah sempadan akan bertukar kepada garis putus-putus hijau.

Contoh

Dalam contoh di bawah, kami menggunakan JavaScript untuk menukar sempadan diisi kotak input pertama kepada "10px hijau pepejal" dan jidar kotak input kedua kepada "3px bertitik merah". 

<html>
<body style="text-align: center;">
   <h2>Changing the Borders of Input Box after filling the Box</h2>
   <!--defining the form-->
   <form>
      <label>First Name:</label>
      <input type="text" id="firstname" name="firstname" value=""><br><br>
      <label>Second Name:</label>
      <input type="text" id="secondname" name="secondname" value=""><br><br>
      <input type="button" value="submit">
   </form>
   <script>
      var tp = document.getElementById("firstname");
      var tp1 = document.getElementById("secondname");
      tp.onchange = function (f) {
         if (tp.value != '') {
            f.target.style.border = "10px solid green";
         }
      };
      tp1.onchange = function (g) {
         if (tp1.value != '') {
            g.target.style.border = "3px dotted red";
         }
      };
   </script>
</body>
</html>

Contoh

Hanya tukar sempadan bawah kotak input

Dalam contoh ini, kami menggunakan sifat borderBottom gaya untuk menukar sempadan bawah kotak input. Untuk membuat perubahan berkuat kuasa, kami menggunakan atribut acara onchange. 

<html>
<body style="text-align: center;">
   <h2>Changing the bottom border of Input Box after filling the box</h2>
   <form>
      <label>First Name:</label>
      <input type="text" id="firstname" name="firstname" value=""><br><br>
      <label>Second Name:</label>
      <input type="text" id="secondname" name="secondname" value=""><br><br>
      <input type="button" value="submit">
   </form>
   <script>
      var tp = document.getElementById("firstname");
      var tp1 = document.getElementById("secondname");
      tp.onchange = function (f) {
         if (tp.value != '') {
            f.target.style.borderBottom = "thick solid #00ff00";
         }
      };
      tp1.onchange = function (g) {
         if (tp1.value != '') {
            g.target.style.borderBottom = "3px dotted green";
         }
      };
   </script>
</body>
</html>

Kesimpulan

Dalam artikel ini, kami menunjukkan dengan contoh cara menukar sempadan kotak input selepas mengisinya. Kami telah melihat contoh tan di mana sempadan bawah berubah kepada hijau apabila kami memasukkan teks dalam kedua-dua medan input. Warna tidak akan berubah jika nilai dalam kedua-dua medan input kosong, ia hanya akan berubah jika nilai itu ada.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk menukar sempadan kotak input selepas mengisinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html NULL 字符串 double 继承 值传递 对象 事件 dom border
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Program JavaScript untuk subset produk minimum tatasusunanArtikel seterusnya：Program JavaScript untuk subset produk minimum tatasusunan

Artikel berkaitan

Lihat lagi