如何定位单个输入焦点

How do I target a single input focus?

本文关键字：单个 输入 焦点 定位 何定位      更新时间：2023-09-26

我将如何定位单个input focus . 

    $(".right input").focus(function(){
    $(".left span").addClass('focus');
}).blur(function(){
    $(".left span").removeClass('focus');
});

当我专注于input时，此代码会将类添加到所有span元素我将如何设置它，以便它只能将类添加到正在关注的input？这是我的网页

<div class="left">
  <span class="name"></span>
  <span class="email"></span>
  <span class="phone"></span>
  <span class="address"></span>
</div>
<div class="right">
<p>
<label for="name">Your Name:</label>
<input id="name" type="text" value="Name" autocomplete="off">
</p>
<p>
<label for="email">Email Address:</label>
<input id="email" type="text" value="Email" autocomplete="off">
</p>
<p>
<label for="phone">Phone Number:</label>
<input id="phone" type="text" value="Phone" autocomplete="off">
</p>
<p>
<label for="address">Your Address:</label>
<input id="address" type="text" value="Address Line 1" autocomplete="off">
</p>
<p>
<label for="address2">Line Address 2:(optional)</label>
<input id="address2" type="text" value="Address Line 2" autocomplete="off">
</p>
</div>

编辑我能否实现此代码选择的答案中给出的代码？

        // Trying to target font customization on single input focus
    // and not all together
    $("#fs").change(function() { // change font family style.
        $('.email').css("font-family", $(this).val());
    });
    $("#size").change(function() { // change font size.
        $('.email').css("font-size", $(this).val() + "pt");
    });

要编辑属于所关注input的span？

使用this引用

 $(".right input").focus(function(){
    $(".left").find('.'+this.id).addClass('focus');  //<--find element with those classes inside .left element
 }).blur(function(){
   $(".left").find('.'+this.id).removeClass('focus');
 });

$('.right input').each(function(){
  var id = $(this).attr('id');
  $(this).bind('focus', function(){
     $('.left').find('.'+ id).addClass('focus');
  });
  $(this).bind('blur', function(){
    $('.left').find('.'+ id).removeClass('focus');
  });
});

试试这个

演示小提琴 

 $(".right input").focus(function(){
     var cls = $(this).prop('id');
     $(".left span."+cls).addClass('focus');
 }).blur(function(){
     $(".left span").removeClass('focus');
 });

试试这个，

$(".right input").focus(function(){
    $(".left span."+this.id).addClass('focus');
}).blur(function(){
    $(".left span."+this.id).removeClass('focus');
});

演示

相关文章：