CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Not able to enter next input field - jQuery

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>

Upvotes: 3

Views: 308

Answers (2)

Koushik Chatterjee
Koushik Chatterjee

Reputation: 4175

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>

Upvotes: 2

P.S.
P.S.

Reputation: 16412

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>

Upvotes: 3

Related Questions