Teks input html dihapus otomatis

Dalam JavaScript, kami biasanya mempertimbangkan properti khusus untuk menangani nilai masukan. Properti value_ bersama dengan metode getElementById() mengambil detail kolom input

Nantinya, kita bisa melakukan beberapa kondisi berdasarkan entry tersebut. Sekali lagi, kita juga dapat bergantung pada beberapa atribut HTML untuk menghubungkan elemen masukan dan fungsi JavaScript

Di sini, kami akan menyajikan beberapa contoh yang dapat diterapkan dalam berbagai cara

Gunakan Atribut onfocus untuk Bidang Input Lenyap di JavaScript

Kami awalnya akan mendeklarasikan bidang input dengan nilai yang ditentukan untuk contoh ini. Selain itu, elemen input akan melompat untuk menjalankan fungsi clearF(this) segera setelah kursor menunjuk atau fokus di kotak input

Jika kondisi fungsi dilayani, itu akan menghapus nilainya, dan dengan demikian input akan dihapus

  
  
  test

Keluaran

Kontennya hilang saat kursor ditempatkan dan diklik pada kolom input. this mengacu pada nilainya untuk elemen tertentu

Gunakan Pernyataan Bersyarat untuk Menghapus Nilai Input Formulir di JavaScript

Menurut pengiriman formulir, diperlukan elemen tombol yang sesuai untuk menyimpan data. Kami akan mengambil elemen form, dan button yang terkait dengannya akan membawa atribut

  
  
  test


  

    
 

Fungsi akan memeriksa apakah kolom input kosong atau tidak. Jika menemukan konten apa pun, itu hanya akan menginisialisasi ulang itu kosong

  
  
  test


  

    
 

Keluaran

Di sini, kami memiliki contoh formulir

  
  
  test


  

    
 

  
  
  test


  

    
 

Gunakan Metode test _3 untuk Menghapus Kolom Input Formulir di JavaScript

Kami juga akan memeriksa formulir untuk menghapus inputnya dengan metode

  
  
  test


  

    
 

Pada artikel ini, kita akan melihat cara meletakkan tombol clear di dalam kotak teks input HTML dengan JavaScript

Cara termudah untuk menambahkan kotak input dengan tombol hapus adalah dengan menambahkan elemen input dengan atribut type yang disetel ke search

Misalnya, kita bisa menulis

<input type="search" />

Kemudian saat kita mengetik di kotak input, kita melihat tombol hapus ditampilkan

Dan kita dapat mengkliknya untuk menghapus nilainya

Kita juga bisa menambahkan kotak input dengan CSS

Misalnya, kita bisa menulis

<form>
  <input type="text" placeholder=" " />
  <button type="reset">&times;</button>
</form>

Kemudian kita dapat menata input untuk menambahkan tombol hapus

form {
  position: relative;
  width: 200px;
}form input {
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
}form input:placeholder-shown+button {
  opacity: 0;
  pointer-events: none;
}form button {
  position: absolute;
  border: none;
  display: block;
  width: 15px;
  height: 15px;
  line-height: 16px;
  font-size: 12px;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
  background: #ddd;
  padding: 0;
  outline: none;
  cursor: pointer;
  transition: .1s;
}

Kami memilih tombol dalam formulir dengan CSS dengan pemilih form button

Dan kami mengatur position ke absolute untuk membuat tombol tetap di tempatnya

Kemudian kami mengatur lebar dan tinggi agar pas di dalam kotak input

Kami juga mengatur background_ untuk menambahkan latar belakang

Untuk menambahkan 'x' di dalam tombol, kami menggunakan entitas HTML

<form>
  <input type="text" placeholder=" " />
  <button type="reset">&times;</button>
</form>

Tombol harus memiliki

<form>
  <input type="text" placeholder=" " />
  <button type="reset">&times;</button>
</form>

Cara termudah untuk menambahkan kotak input dengan tombol hapus adalah dengan menambahkan elemen input dengan atribut type yang disetel ke search

Kami juga dapat menambahkan CSS kami sendiri ke tombol kami sendiri untuk menambahkan tombol untuk menghapus input formulir

Lebih banyak konten di PlainEnglish. io. Mendaftar untuk buletin mingguan gratis kami. Ikuti kami di Twitter, LinkedIn, YouTube, dan Discord. Tertarik dengan Peretasan Pertumbuhan?

Bagaimana Anda menghapus input teks dalam HTML?

Bagaimana cara membuat kolom input saya jelas?

Bagaimana cara menempatkan tombol hapus responsif di dalam bidang teks input HTML?

Bagaimana cara menghapus cache kotak teks dalam HTML?