无法输入下一个输入字段 - jQuery

Posted 2023-02-25

【中文标题】无法输入下一个输入字段 - jQuery

【英文标题】：Not able to enter next input field - jQuery

【发布时间】：2017-09-07 20:17:37

【问题描述】：

我无法输入下一个输入字段，即在逗号输入上创建文本的第一个字段，它似乎工作正常，但 focus 不工作

这里是代码

在第一个字段中输入内容，点击逗号 尝试移至下一个输入字段，焦点不起作用

$('#tags input').on('focusout', function() 
	var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
	if (txt) $(this).before('<span class="tag">' + txt + '</span>');
	this.value = "";
	this.focus();
).on('keyup', function(e) 
	if (/(188|13)/.test(e.which)) $(this).focusout();
	event.preventDefault(e);
);

.form-groupfloat:left; width:100%; margin-bottom:15px;
.form-group > inputpadding:6px 12px; width:100%;
.tagbackground:#ccc; padding:2px 4px; display:inline-block; margin-right:5px; margin-bottom:5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group" id="tags" >
  <label for="submittedby">Add CC</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>
<div class="form-group" >
  <label for="submittedby">Other</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>

【问题讨论】：

因为你在focusout事件上做focus()，导致重新关注同一个元素

【参考方案1】：

您需要在下一个输入字段中调用.focus()，而不是this。我是这样得到的：document.getElementsByTagName('input')[1]，但你可以用任何你喜欢的方式得到它。这是工作的 sn-p：

$('#tags input').on('focusout', function() 
	var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
	if (txt) $(this).before('<span class="tag">' + txt + '</span>');
	this.value = "";
  var nextInput = document.getElementsByTagName('input')[1]
	nextInput.focus();
).on('keyup', function(e) 
	if (/(188|13)/.test(e.which)) $(this).focusout();
	event.preventDefault(e);
);

.form-groupfloat:left; width:100%; margin-bottom:15px;
.form-group > inputpadding:6px 12px; width:100%;
.tagbackground:#ccc; padding:2px 4px; display:inline-block; margin-right:5px; margin-bottom:5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group" id="tags" >
  <label for="submittedby">Add CC</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>
<div class="form-group" >
  <label for="submittedby">Other</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>

【讨论】：

只是想知道为什么this 不起作用，根据您的建议，我想我可以使用 `var nextInput = $(".form-control > input"); nextInput.focus();`这个好用吗？

不完全是。例如，您可以使用var nextInput = $('.form-control')[1]。您有 2 个带有 form-control 类的输入，当您编写 $('.form-control') 时，它将选择具有此类类的 ALL 元素。所以接下来你只需要选择特定的元素（我们有2个元素，我们要选择第二个），只需在后面加上[1]，它就会选择第二个输入

【参考方案2】：

只需从focusout 事件中删除focus() 调用，它就会按照你的预期工作，它基本上会导致重新聚焦，你将永远无法聚焦。

$('#tags input').on('focusout', function() 
	var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
	if (txt) $(this).before('<span class="tag">' + txt + '</span>');
	this.value = "";
	//this.focus(); simply remove this
).on('keyup', function(e) 
	if (/(188|13)/.test(e.which)) $(this).focusout();
	event.preventDefault(e);
);

.form-groupfloat:left; width:100%; margin-bottom:15px;
.form-group > inputpadding:6px 12px; width:100%;
.tagbackground:#ccc; padding:2px 4px; display:inline-block; margin-right:5px; margin-bottom:5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group" id="tags" >
  <label for="submittedby">Add CC</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>
<div class="form-group" >
  <label for="submittedby">Other</label>
  <input type="text" class="form-control" value="" placeholder="Add Email Address">
</div>

【讨论】：

看来你的sn-p不能正常工作，输入分号后第二个输入没有聚焦

嗯，这是一个设计泄漏，它应该在手动调用focusout() 之后从keyup 事件处理（接下来关注）。而不是里面的焦点。我没有创建 sn-p，只是从问题中复制并纠正了错误的地方