javascript-i-input入力ボックス自動フォーカス最適化
1409 ワード
実現原理:
1、登録またはログインのページを開くと、デフォルトは最初のInputにフォーカスします.
2、jsがまだロードされていない場合、先にページのロードが完了し、ユーザーが第二のInput(パスワードに対応しているInputが多い)に記入したので、この時に第一の入力枠にフォーカスする必要がなくなります.
上の原理により、作成できるコードは以下の通りです.
第一の方法:原生js
1、登録またはログインのページを開くと、デフォルトは最初のInputにフォーカスします.
2、jsがまだロードされていない場合、先にページのロードが完了し、ユーザーが第二のInput(パスワードに対応しているInputが多い)に記入したので、この時に第一の入力枠にフォーカスする必要がなくなります.
上の原理により、作成できるコードは以下の通りです.
第一の方法:原生js
window.onload = function(){
if(document.forms.length>0){
for(i=0;i<document.forms[0].elements.length; i++){
var Input = document.forms[0].elements[i];
if(Input.type!="hidden" && Input.value.length>0){
Input.blur();
return;
}else if(Input.type!="hidden"){
Input.focus();return
}
}
}
第二の方法:jqueryを利用する.
$(function(){
if($('form').length>0){
var formArr = $('form');
var firstFromInp= $(formArr[0]).children('input:not(:hidden)');
for(i=0;i<firstFromInp.length;i++){
var Input = $(firstFromInp[i]).val();
if(Input){
$(firstFromInp[i]).blur();
return;
}else{
$(firstFromInp[i]).focus();
return;
}
}
}
});