jQueryの：どのように入力ボックスクラスセレクタベースの機能

$("#x1").focus(); 
 
$('#x1').get(0).focus(); 
 

 
$('.inputTextBox').focus(function() { 
 
    //This is where I need help... how to get the 
 
    //element of the element that is getting focus? 
 
    var myElement = document.getElementById('x1'); 
 
    myElement.style.backgroundColor = "#A7C942"; 
 
    myElement.style.color = "black"; 
 
    myElement.style.fontSize = "2em"; 
 
}); 
 

 
$('inputTextBox').blur(function() { 
 
    //This is where I need help... how to get the 
 
    //element of the element that is losing focus? 
 
    var myElement = document.getElementById('x1'); 
 
    myElement.style.backgroundColor = "gray"; 
 
    myElement.style.color = "black"; 
 
    myElement.style.fontSize = "2em"; 
 
});

.inputTextBox { 
 
    background: gray; 
 
    background-color: gray; 
 
    color: black; 
 
    font-size: 2em 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <div data-role="content"> 
 
    <fieldset> 
 
     <label>x1</label> 
 
     <input id="x1" , autofocus="autofocus" , class="inputTextBox" /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <label>x2</label> 
 
     <input id="x2" , class="inputTextBox" /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <label>x3</label> 
 
     <input id="x3" , class="inputTextBox" /> 
 
    </fieldset> 
 
    <input type="submit" value="Log in" style="width:100%" /> 
 
    </div> 
 
</body> 
 
</html>

で要素を取得すると、私が発射された要素を取得する方法を見つけ出す必要があるので、Idsが自動的に生成されますfocusおよびblurイベント。

何とかこれらを渡すことはできますか？またはDOMから取得できますか？

メモ：入力タグ内でOnfocusとonblurを使用しようとしましたが、これはchromeでのみ有効です。私はこれをIEのために働かせることはできません。

2番目の質問：コントロール要素の上にタブを置く方法はありますか？私はボタンを通過するとき、私は最初のテキストボックスにループしたいと思いますが、代わりにヘッダの最初の要素をヒットします。

出典

2016-11-18 user2040850

まあ、私はあなたが使用しようとしているjQueryライブラリが参照されていませんので、これはどこでも動作します驚いています...また、 '$（「inputTextBox」）' '$でなければなりません（ '.inputTextBox'） '。がありません。 – Pogrindis

フォーカスを失っている要素の要素を取得する方法は？セレクタとして '$（this）'を使用してください。 –

'var curElement = document.activeElement;'は現在フォーカスされている要素を返します。 https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElementを参照してください –

ここにはjQueryソリューションがあります。あなたのコードに$セレクタがあるので。

//Jquery Solution 
 
$(document).ready(function(){ 
 
    $('.inputTextBox').focus(function() { 
 
    $(this).addClass('focus'); 
 
    }).blur(function() { 
 
    $(this).removeClass('focus'); 
 
    }); 
 
});

.inputTextBox { 
 
    background:gray; 
 
    background-color:gray; 
 
    color:black; 
 
    font-size:2em 
 
    } 
 

 
.focus{ 
 
    background: #A7C942; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<div data-role="content"> 
 
    <fieldset> 
 
      <label>x1</label> 
 
      <input id = "x1", autofocus ="autofocus", class = "inputTextBox" /> 
 
    </fieldset> 
 

 
    <fieldset> 
 
     <label>x2</label> 
 
     <input id = "x2", class = "inputTextBox" /> 
 
    </fieldset> 
 

 
    <fieldset> 
 
     <label>x3</label> 
 
     <input id = "x3", class = "inputTextBox" /> 
 
    </fieldset> 
 

 

 
    <input type="submit" value="Log in" style="width:100%" /> 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-11-18 13:11:51

ありがとう...それは働いた...非常に単純な解決、 – user2040850

このコードでは、あなたのアイテムをビンビンする求めているものを行います。

セレクト最初fieldset、その後、label

編集

にinputフォーカスを結合して、ぼかし、およびapplyu CSSルール私はバイオリンにtab一部を追加しました。

カウンター（選択）が必要です。文書の各キーダウン時にタブの場合は、次の（または最初の）入力にフォーカスすることができます。

入力に注目するときは、選択変数を現在の値に設定する必要があることに注意してください。

var select = 0; 
 

 
$('fieldset').each(function(index) { 
 
    var $fieldset = $(this); 
 
    var $input = $fieldset.find('input'); 
 
    var $label = $fieldset.find('label'); 
 
    $input.focus(function() { 
 
    select = index; 
 
    $label.css({ 
 
     backgroundColor: "#A7C942", 
 
     color: "black", 
 
     fontSize: "2em" 
 
    }); 
 
    }).blur(function() { 
 
    $label.css({ 
 
     backgroundColor: "gray", 
 
     color: "black", 
 
     fontSize: "2em" 
 
    }); 
 
    }); 
 
}); 
 

 
$(document).on('keydown', function(ev) { 
 
    ev.preventDefault(); 
 
    var inputs = $("fieldset input"); 
 
    var next = select < (inputs.length - 1) ? select + 1 : 0; 
 
    $("fieldset input")[next].focus();; 
 
}) 
 

 
$("fieldset input")[select].focus();

.inputTextBox { 
 
    background: gray; 
 
    background-color: gray; 
 
    color: black; 
 
    font-size: 2em 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div data-role="content"> 
 
    <fieldset> 
 
     <label>x1</label> 
 
     <input id="x1" , autofocus="autofocus" , class="inputTextBox" /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <label>x2</label> 
 
     <input id="x2" , class="inputTextBox" /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <label>x3</label> 
 
     <input id="x3" , class="inputTextBox" /> 
 
    </fieldset> 
 
    <input type="submit" value="Log in" style="width:100%" /> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-11-18 13:13:46 GiuServ

ありがとう...この作品...非常にいい。私はあなたがkeypressをキャプチャするためのコードを含んでいたことに感謝します...これを変更してEnterキープレスをキャプチャするだけです。これは素晴らしいボーナスでした – user2040850

jQueryの：どのように入力ボックスクラスセレクタベースの機能

答えて

関連する問題