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

Question

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

这里是代码

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

$('#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-group{float:left; width:100%; margin-bottom:15px;}
.form-group > input{padding:6px 12px; width:100%;}
.tag{background:#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>

Answer 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-group{float:left; width:100%; margin-bottom:15px;}
.form-group > input{padding:6px 12px; width:100%;}
.tag{background:#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>

Answer 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-group{float:left; width:100%; margin-bottom:15px;}
.form-group > input{padding:6px 12px; width:100%;}
.tag{background:#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>