Bir web sayfasının odağını (giriş imleci), sayfanın yüklenmesinde öğenin kimliğini bilmek zorunda kalmadan ilk giriş öğesine (metin kutusu, açılır liste, ...) ayarlamanın basit bir yolu var mı ?
Bunu, web uygulamamın tüm sayfalarım / formları için ortak bir komut dosyası olarak uygulamak istiyorum.
Yanıtlar:
Ayrıca jQuery tabanlı yöntemi de deneyebilirsiniz:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Bu, soruyu yanıtlamasa da (ortak bir komut dosyası gerektirir), HTML5'in "otomatik odaklama" özelliğini sunduğunu başkalarının bilmesinin yararlı olabileceğini düşündüm:
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
HTML5'e dalın daha fazla bilgi var.
autofocusHiçbir değer olmadan kullanmaya çalıştığımda Spring uygulamam bozuluyor spring:form. autofocus="autofocus"yine de iyi çalışıyor. Teşekkürler @ Jacob.
document.forms[0].elements[0].focus();
Bu, örneğin bir döngü kullanılarak rafine edilebilir. belirli alan türlerine, engelli alanlara vb. odaklanmayın. Gerçekten odaklanmak istediğiniz alana bir class = "autofocus" eklemek ve bu className'i arayan [i] .elements [j] formları üzerinde döngü yapmak daha iyi olabilir .
Her neyse: Bunu her sayfada yapmak normalde iyi bir fikir değildir. Bir girdiye odaklandığınızda, kullanıcı örneğin yapma yeteneğini kaybeder. sayfayı klavyeden kaydırın. Beklenmedikse, bu can sıkıcı olabilir, bu nedenle yalnızca form alanını kullanmanın kullanıcının yapmak istediği şey olacağından oldukça emin olduğunuzda otomatik odaklanma. yani. Google iseniz.
Çalıştığım bulundu en kapsamlı jQuery ifadesi (aşırı yardımıyla geçer burada )
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Eğer kullanıyorsanız Prototip JavaScript çerçevesi o zaman kullanabilirsiniz focusFirstElement yöntemi:
Form.focusFirstElement(document.forms[0]);
Burada yararlı olabilecek bir yazı var: Odağı Web Sayfasındaki İlk Girişe Ayarlayın
Ayrıca tüm gizli girişleri atlamanız gerekir.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
whileifade kullanabiliyorsanız neden hafızayı boşa harcayasınız ?
Bu kodu bodyetiketinizin sonuna koymak , ilk görünür, gizli olmayan etkin öğeyi otomatik olarak ekrana odaklayacaktır. Kısa sürede bulabileceğim çoğu davayı halledecek.
<script>
(function(){
var forms = document.forms || [];
for(var i = 0; i < forms.length; i++){
for(var j = 0; j < forms[i].length; j++){
if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
forms[i][j].focus();
return;
}
}
}
})();
</script>
Yukarıdaki cevapların çoğunu denedim ve işe yaramadılar. Bunu şu adreste buldum : http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Teşekkürler Kolodvor.
$("input:text:visible:first").focus();
Bunu kullanıyorum:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
Bu, metin alanları ve seçim kutuları dahil olmak üzere görünür herhangi bir ortak girdinin ilkini alır. Bu aynı zamanda gizli, devre dışı veya salt okunur olmadıklarından emin olmanızı sağlar. yazılımımda kullandığım bir hedef div'e de izin veriyor (yani, bu formun içine ilk girdi).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
jquery olmadan, örneğin normal javascript ile:
document.querySelector('form input:not([type=hidden])').focus()
Safari'de çalışıyor ancak Chrome 75'te değil (Nisan 2019)
Bu, metin alanlarını içerir ve radyo düğmelerini hariç tutar
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if(first_input != undefined){ first_input.focus(); }
});
Bir üst öğe bu öğeyi gizleyebileceğinden, display özniteliğini kontrol etmek yerine clientHeight kullanabilmelisiniz:
function setFocus() {
var forms = document.forms || [];
for (var i = 0; i < forms.length; i++) {
for (var j = 0; j < forms[i].length; j++) {
var widget = forms[i][j];
if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
&& (typeof widget.disabled === "undefined" || widget.disabled === false)
&& (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
widget.focus();
break;
}
}
}
}
}
Üçüncü taraf kitaplıklar olmadan, aşağıdaki gibi bir şey kullanın
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
Tüm form öğesi etiketlerini dikkate aldığınızdan, diğer yanıtlarda olduğu gibi gizli / devre dışı olanları ekarte ettiğinizden emin olun.