JQuery: How to get the element in a class selector based function
Question
$("#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>
The input boxes and the Ids will be generated automatically so I need to figure out how to get the element that is firing the focus and blur events.
Can I pass these somehow? Or can I get from the DOM?
NOTE: I have tried to use the Onfocus and the onblur inside the input tag, but this only works for chrome. I can't get this to work for IE.
Second question: Is there any way to tab JUST over the control elements? When I tab past the button I would like to loop back to the first textbox, but instead I hit other elements in the header first.
2 answers
solution1
0 ACCPTED 2016-11-18 13:11:51
Here is the jQuery solution. Since you have $ selector in your code.
//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>
solution2
0 2016-11-18 13:13:46
This code will do what you're asking to bing your items.
Select first the fieldset , then bind the input focus and blur, and applyu css rules to label
edit
I added the tab part to the fiddle.
You need a counter (select) and on each keydown on document, if it's a tab, you can focus the next (or first) input.
Note that when you focus on an input, you need to set the select variable to the current one.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.