Kotak Input Fokus Pada Beban

95

Bagaimana kursor dapat fokus pada kotak masukan tertentu saat pemuatan halaman?

Apakah mungkin untuk mempertahankan nilai teks awal juga dan menempatkan kursor di akhir masukan?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />
javascript html dom xhtml Codex73
sumber

Jawaban:

170

Ada dua bagian dari pertanyaan Anda.

1) Bagaimana cara memfokuskan input pada pemuatan halaman?

Anda tinggal menambahkan autofocusatribut ke input. 

<input id="myinputbox" type="text" autofocus>

Namun, ini mungkin tidak didukung di semua browser, jadi kita bisa menggunakan javascript.

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

2) Bagaimana cara menempatkan kursor di akhir teks input?

Berikut adalah solusi non-jQuery dengan beberapa kode pinjaman dari jawaban SO lain . 

function placeCursorAtEnd() {
  if (this.setSelectionRange) {
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two.
    var len = this.value.length * 2;
    this.setSelectionRange(len, len);
  } else {
    // This might work for browsers without setSelectionRange support.
    this.value = this.value;
  }

  if (this.nodeName === "TEXTAREA") {
    // This will scroll a textarea to the bottom if needed
    this.scrollTop = 999999;
  }
};

window.onload = function() {
  var input = document.getElementById("myinputbox");

  if (obj.addEventListener) {
    obj.addEventListener("focus", placeCursorAtEnd, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('onfocus', placeCursorAtEnd);
  }

  input.focus();
}

Berikut adalah contoh bagaimana saya melakukannya dengan jQuery.

<input type="text" autofocus>

<script>
$(function() {
  $("[autofocus]").on("focus", function() {
    if (this.setSelectionRange) {
      var len = this.value.length * 2;
      this.setSelectionRange(len, len);
    } else {
      this.value = this.value;
    }
    this.scrollTop = 999999;
  }).focus();
});
</script>
jessegavin
sumber
3
Blok kode pertama yang disarankan sebenarnya menempatkan kursor di akhir nilai yang ada juga, itu berfungsi dengan baik. Saya menghargai bantuan Anda.
Codex73
46

Perlu diketahui - Anda sekarang dapat melakukan ini dengan HTML5 tanpa JavaScript untuk browser yang mendukungnya:

<input type="text" autofocus>

Anda mungkin ingin memulai dengan ini dan membangunnya dengan JavaScript untuk menyediakan cadangan untuk browser lama.

David Calhoun
sumber
Senang mengetahui bahwa, apakah ini sudah memindahkan kursor ke posisi terakhir di kolom input?
Camilo Díaz Repka
1
Saya tidak berpikir bahwa @ Codex73 mencoba mencapai apa yang dilakukan atribut placeholder di HTML5. Sepertinya dia ingin kursor diposisikan secara otomatis di akhir nilai apa pun yang saat ini ada di input.
jessegavin
2
Anda benar, ini bukanlah solusi lengkap. Tetapi ini menyelesaikan beberapa hal (onload autofocus dan teks placeholder).
David Calhoun
Perhatikan bahwa pada 1/2019, Safari pada iOS tidak mendukung ini: caniuse.com/#feat=autofocus
sporker
11 
$(document).ready(function() {
    $('#id').focus();
});
Nasruddin
sumber
1
Ini membutuhkan jQuery.
Tom Pohl
1
Ya, Anda perlu menyertakan jQuery libs :)
Nasruddin
classic stackoverflow :)
Florian Fida
3 
function focusOnMyInputBox(){                                 
    document.getElementById("myinputbox").focus();
}

<body onLoad="focusOnMyInputBox();">

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text">
crnlx
sumber
2

Cara portabel untuk melakukan ini adalah menggunakan fungsi khusus (untuk menangani perbedaan browser) seperti ini .

Kemudian siapkan penangan untuk onloadbagian akhir <body>tag Anda , seperti yang ditulis jessegavin:

window.onload = function() {
  document.getElementById("myinputbox").focus();
}
Camilo Díaz Repka
sumber
1

Bekerja dengan baik ...

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}
Mohammed Javed
sumber
1

solusi satu baris yang sangat sederhana:

<body onLoad="document.getElementById('myinputbox').focus();">
kavi
sumber
0

Inilah yang bekerja dengan baik untuk saya:

<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff akan menjadi variabel global yang namanya sama sekali tidak relevan dan tujuannya adalah menghentikan peristiwa onload generik untuk memaksa fokus pada masukan tersebut.

<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

Dari: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

Roger
sumber
0

Jika Anda tidak dapat menambahkan ke tag BODY karena alasan tertentu, Anda dapat menambahkan ini SETELAH Formulir:

<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>
Zardiw
sumber
0

Mencoba:

Javascript Murni:

[elem][n].style.visibility='visible';
[elem][n].focus();

Jquery:

[elem].filter(':visible').focus();
KingRider
sumber
0

Tambahkan ini ke atas js Anda 

var input = $('#myinputbox');

input.focus();

Atau untuk html 

<script>
    var input = $('#myinputbox');

    input.focus();
</script>
Marty
sumber