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