it-swarm-id.com

Bagaimana cara menghindari fokus otomatis pada bidang input pertama saat memunculkan formulir HTML sebagai dialog JQuery?

Saya telah melihat pertanyaan serupa di SO, termasuk ini , yang sudah tua. Saya membaca dan mengikuti tautan, tetapi tidak jelas apakah ada solusi yang tepat untuk masalah ini hari ini.

Masalah bawah saya adalah bahwa saya menggunakan placeholder="..." HTML pada kolom input Dengan memfokuskan secara otomatis pada bidang pertama, placeholder-nya tidak lagi terlihat oleh pengguna.

SUNTING

Ini kode HTML saya:

<div id='LOGIN_FORM' title="Login">
    <form action="">
        <input type="text" name="login_id" required="required"
                           placeholder="Enter user ID" /><br />
        <input type="password" name="login_pwd" required="required"
                           placeholder="Enter password" /><br />
    </form>
</div>

Ini kode JS saya:

$("#login").click(function() { 
    $("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
    {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        }
    ] });
});
21

Solusinya adalah dengan menetapkan tabindex="-1" padaSEMUAbidang input untuk menjaga placeholder HTML tetap terlihat.

5

Apa yang saya lakukan adalah saya membuat input tambahan dan membuatnya tidak terlihat (style="display:none") kemudian memberikannya properti autofocus="true" menempatkan ini di akhir konten dialog Anda sehingga tidak akan dipusingkan dengan apa pun. seharusnya terlihat seperti ini:

        <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>
16
Tyler Richardson

Menambahkan tag ini sebagai bidang input pertama pada halaman berfungsi untuk saya.

<input type="text" autofocus="autofocus" style="display:none" />

Tidak perlu javascript dan menjaga urutan tab jika Anda ingin menggunakan tombol tab untuk bergerak melalui bidang.

(Diuji pada Chrome> 65, Firefox> 59 dan Edge)

6
Mike

Saya akhirnya melakukan ini:

<input type="text" style="position: fixed; left: -10000000px;" disabled/>
6
Robert

Anda dapat menggunakan jquery: 

jQuery(document).ready(function(e) {
   $('input[name="login_id"]').blur(); 
});

Ini jika Anda merasa sulit untuk melacak bug mengapa autofocus diatur ke bidang input pertama Anda dari formulir. Pastikan untuk memasukkan kode ini sebelum tag tubuh </body> penutup dokumen Anda.

1
Felix Jr