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>

输入框和Ids将自动生成，因此我需要弄清楚如何获取触发focus和blur事件的元素。

我可以以某种方式传递这些吗？或者我可以从DOM获得吗？

注意：我尝试在输入标签内使用Onfocus和onblur，但这仅适用于chrome。我不能让这个为IE工作。

第二个问题：有没有办法在控制元素上添加JUST？当我通过按钮选项卡时，我想循环回到第一个文本框，但我先点击标题中的其他元素。

Answer 1

这是jQuery解决方案。由于您的代码中有$选择器。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

此代码会执行您要求的物品。

首先选择(subquery).paginate(page=offset, per_page=limit)，然后将fieldset焦点和模糊以及应用css规则绑定到input

修改

我将label部分添加到小提琴中。

您需要一个计数器（选择）并在文档的每个keydown上，如果它是一个标签，您可以关注下一个（或第一个）输入。

请注意，当您专注于输入时，需要将select变量设置为当前变量。

＆＃13;
＆＃13;
tab
＆＃13;
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();
＆＃13;
.inputTextBox { background: gray; background-color: gray; color: black; font-size: 2em }
＆＃13;
＆＃13;
＆＃13;

JQuery：如何在基于类选择器的函数中获取元素

2 个答案: