Question: Not able to enter next input field - jQuery

Question

Not able to enter next input field - jQuery

Answers 2
Added at 2017-09-07 22:09
Tags
Question

I am not able to type to next input field, the first field where text is being created on comma enter and its seems to be working fine but focus not working

Here is the code

  1. Type something in first field, hit comma
  2. Try moving to next input field, focus not working

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

Answers to

Not able to enter next input field - jQuery

nr: #1 dodano: 2017-09-07 22:09

You need to call .focus() on next input field, not this. I've got it this way: document.getElementsByTagName('input')[1], but you can get it any way you like. Here is the working snippet:

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

nr: #2 dodano: 2017-09-07 22:09

Simply remove the focus() call from focusout event, and it will work as per your expectation, its basically causing re focus, and you will be never able to focus out.

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

Source Show
◀ Wstecz