焦点不适用于输入字段 Jquery

Question

我正在尝试使用动态添加输入字段 jquery.I 我可以添加输入字段但无法将焦点移至下一个输入字段。

代码如下：-

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $(scntDiv).keypress( function(event) {
    if (event.which==13){
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
      i++;
      return false;
    }

  });

  $('#remScnt').live('click', function() { 
    if( i > 2 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
  <p>
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
  </p>
</div>

Answer 1

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;
        
        $(scntDiv).keypress( function(event) {
        if (event.which==13){
                $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i +'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                 $("#p_scnt_" + i).focus();
                i++;
                return false;
                }
              
        });
        
        $('#remScnt').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

您可以为每个附加的新原始文件提供唯一 ID，在附加后您可以使用该 ID 触发焦点。

Answer 2

1. id 每个元素需要唯一，因此将 id='p_scnt' 更改为 class='p_scnt' 用于输入 boxes.As 以及使用 class="remScnt" 而不是 id="remScnt" 来删除按钮

2. 使用$('.p_scnt:last').focus(); 将焦点添加到动态创建的输入框

3 正如您在评论中提到的，您使用了 jQuery 最新版本，因此 .live() 是不工作，现在你需要使用 jQuery event delegation

工作片段：-

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').length;

  $(scntDiv).keypress( function(event) {
    if (event.which==13){
    alert($(event.target).val());
      $('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
      $('.p_scnt:last').focus();
      i++;
      return false;
    }
  });

  $(document).on('click','.remScnt',function() { 
    if( i > 1 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

* { 
  font-family:Arial; 
}
h2 { 
  padding:0 0 5px 5px; 
}
h2 a { 
  color: #224f99; 
}
a { 
  color:#999; 
  text-decoration: none; 
}
a:hover { 
  color:#802727; 
}
p { 
  padding:0 0 5px 0; 
}

input { 
  padding:5px; 
  border:1px solid #999; 
  border-radius:4px; 
  -moz-border-radius:4px; 
  -web-kit-border-radius:4px; 
  -khtml-border-radius:4px; 
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

注意：- 到 alert() 值在 if (event.which==13){ 条件下执行 alert($(event.target).val());。

焦点不适用于输入字段 Jquery

Focus not working for input fields Jquery

html

javascript

jquery

keypress