Question

我无法输入到下一个输入字段，第一个在逗号上创建文本的字段，它似乎工作正常，但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-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]，但你可以按照自己喜欢的方式得到它。这是工作片段：

＆＃13;

$('#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);
});

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

只需从focus()事件中移除focusout来电，它就会按照您的预期运作，它基本上会引起重新聚焦，您将永远无法专注。

$('#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>

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

2 个答案: