Pertanyaan Teks di Bidang HTML menghilang saat diklik?


Saya dapat dengan mudah membuat bidang masukan html yang sudah ada teks di dalamnya. Tetapi ketika pengguna mengklik pada kolom input, teks tidak menghilang tetapi tetap di sana. Pengguna kemudian harus secara manual menghapus teks untuk mengetik. Bagaimana saya bisa membuat bidang input di mana ketika pengguna mengklik pada kotak bidang input teks kemudian menghilang?


31
2017-10-26 17:25


asal


Jawaban:


Yang ingin Anda lakukan adalah menggunakan atribut HTML5 placeholder yang memungkinkan Anda menetapkan nilai default untuk kotak input Anda:

<input type="text" name="inputBox" placeholder="enter your text here"> 

Ini harus mencapai apa yang Anda cari. Namun, berhati-hatilah karena atribut placeholder tidak didukung di Internet Explorer 9 dan versi sebelumnya.


145
2018-02-22 11:05



Untuk mencapai hal itu, Anda dapat menggunakan dua kejadian tersebut secara onfocus dan onblur:

<input type="text" name="theName" value="DefaultValue"
  onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}"
  onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}"
  style="color:#BBB;" />

20
2017-10-26 17:53



Ini sesederhana saya pikir solusi yang harus menyelesaikan semua masalah Anda:

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">

Ini adalah tombol kirim Anda:

<input type="submit" id= "submitBtn" value="Submit">

kemudian letakkan jQuery kecil ini dalam file js:

//this will submit only if the value is not default
$("#submitBtn").click(function () {
    if ($("#valueText").val() === "ENTER VALUE")
    {
        alert("please insert a valid value");
        return false;
    }
});

//this will put default value if the field is empty
$("#valueText").blur(function () {
    if(this.value == ''){ 
        this.value = 'ENTER VALUE';
    }
}); 

 //this will empty the field is the value is the default one
 $("#valueText").focus(function () {
    if (this.value == 'ENTER VALUE') {
        this.value = ''; 
    }
});

Dan itu juga berfungsi di browser yang lebih lama. Plus itu dengan mudah dapat dikonversi ke javascript normal jika Anda membutuhkannya.


5
2017-07-11 08:48



Sederhana seperti ini: <input type="text" name="email" value="e-mail..." onFocus="this.value=''">


4
2017-09-03 10:27



coba yang ini.

<label for="user">user</label>
<input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"    
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" />

semoga ini membantu.


3
2018-05-08 13:10



Bagaimana dengan sesuatu yang seperti ini?

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

Ini akan terhindar dari pemfokusan pertama kali, tetapi kemudian tidak akan menghapus fokus berikutnya setelah pengguna memasukkan nilainya, ketika dibiarkan kosong, akan mengembalikan nilai yang diberikan.


3
2017-10-26 17:36