I'm trying to auto-advance to the next input field within a class once the input's max length is reached, but the code snippets I've found don't work.
Here is my HTML:
<div class="input_row d-flex justify-content-center" id="first_word">
<div class="empty_status" id="input_01" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_02" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_03" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_04" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_05" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
</div>
And here is the jQuery code I used:
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
Nothing happens though. I added an alert to the function as well, but the alert was never called.
After Googling around, I found this sample of code on the jQuery API, which I thought might be useful to check and see if the keyup event handler was being called.
$( "#target" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
I added an id="target" to my first input field and then tried it, but it didn't work either at first. However, rewriting it as a named function, and then adding an inline onkeyup event to the input in the HTML to call it by name actually DID work.
Any thoughts on what could be wrong? I might be able to figure out a way to make the original function work that way, but I've already got enough going inline that I'd prefer not to.
I just wanted to throw this out there, in case anyone runs into the same problem.
My code didn't work for two reasons:
Since the inputs lived in different divs, next wouldn't work. Changing the code to
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).closest('div').next().children().focus();
}
});
worked just fine.
It also didn't work because in my HTML document, I was calling the script src in the head of my document, instead of at the bottom. Apparently, you can run into problems if the script loads before the html elements they're handling do. I didn't know that, I've only been working on original code for less than a month.
Thanks to u/virtual_lee123 on reddit for helping me figure it out.
Code:
<div class="col-lg-3 form-group">
<label for="daterange"><strong> Date range</strong></label>
<input type="text" name="daterange" autocomplete="off" bsDaterangepicker #datepickerMD="bsDaterangepicker"
[bsConfig]="{ todayHighlight: true, rangeInputFormat : 'MM/DD/YYYY', dateInputFormat: 'MM/DD/YYYY', showWeekNumbers: false }"
id="daterange" placeholder="Date Range" formControlName="daterangeapp" class="form-control"/>
<div class="dr-input-group-append">
<button class="calendar w-auto input-calendar-btn" (click)="datepickerMD.toggle()" type="button"
[attr.aria-expanded]="datepickerMD.isOpen">
<img tabindex="1" class="img-prop" src="assets/img/calendar_small.png" alt="Save"/>
</button>
</div>
</div>
Am getting the daterange selection as above however, I need to highlight today's date in the picker as well. Tried bsconfig parameter todayHighlight: true it was not working.
According to this Github question and based on this example you should be able to style Today's date based on the custom CSS class .custom-today-class.
So for example
.custom-today-class {
background-color:red
}
You can see how it works in this forked example.
I've made a typeahead that uses hostlistner to listen after focus and then activate focus on the input:
<input #inputField type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="emitResult($event)"/>
<ng-template #rt let-r="result" let-t="term">
{{r[displayKey]}}
</ng-template>
I listen after focus and set focus in the following way:
#ViewChild('inputField') inputField: ElementRef;
#HostListener('focus') focusIn() {
if (!this.focused) {
setTimeout(() => {
this.focused = true;
this.inputField.nativeElement.focus();
});
}
}
And the problem Im having is that it messes up the tabindex in the parent view.
<div class="col-12">
<label for="sw">SW</label>
<shrd-typeahead id="sw" autoFocus [data]="swList" [filterKey]="'name'" [displayKey]="'name'" (result)=selectedSw($event)
tabindex="1"></shrd-typeahead>
</div>
<div class="col-12">
<label for="amount">Amount</label>
<input type="text" class="form-control" id="amount" [(ngModel)]="amount" tabindex="2">
</div>
So I can set the focus without problem. But when I press "tab" after I've picked SW in the list I go to navigation in chrome instead of going to the next inputfield. :S
Is there a neat solution for this problem?
br
In our rather complex form I found that the ng-dirty flag being applied when nothing was actually changed. I originally thought the problem was in the placeholder attribute on the input text, but now even with this attribute removed the flag is still being set when nothing was changed. Is it some sort of a bug? If yes, what is the solution? The problematic elements defined as following
<div class="form-group" ng-show="isNew">
<div class="controls">
<label class="control-label col-md-3 col-lg-3" title="#Labels.operatorCode">#Labels.operatorCode:</label>
<div class="col-md-6 col-lg-6">
<input type="text" name="opCode" id="opCode" ng-model="currentOperator.opCode"
class="form-control" ng-maxlength="6" ng-show="isNew"
ng-required ="isNew" />
<div class="field-validation-error" >
<span ng-show="form.editOperatorGeneralForm.opCode.$error.required && form.editOperatorGeneralForm.opCode.$dirty">#String.Format(Messages.isRequired, Labels.operatorCode)</span>
<span ng-show="form.editOperatorGeneralForm.opCode.$error.maxlength && form.editOperatorGeneralForm.opCode.$dirty">#String.Format(Messages.cannotExceed, Labels.operatorCode, "6")</span>
</div>
</div>
</div>
</div>
The form itself is quite complex with several tabs.
I only see this problem in Chrome browser now, it works fine in IE (no question).
Although this does not answer your exact question, I do believe it will solve your problem. Consider doing your validation logic like this.
View
<div class="form-group" ng-class="{'has-error':!SomeForm.someValue.$valid && SomeForm.$submitted}">
<label class="control-label" for="someValue">Some Value</label>
<input id="someValue"
name="someValue"
class="form-control"
type="text"
placeholder="(Required)"
required
ng-model="vm.temp.someValue"
ng-maxlength="255"/>
<div class="help-block"
ng-messages="SomeForm.someValue.$error"
ng-if="SomeForm.$submitted">
<div ng-messages-include="ui/messages.tpl.html"></div>
</div>
</div>
Controller
vm.submit = function(Form, data) {
if (!Form || Form.$invalid) { return; }
if (vm.isUnchanged()) { return; }
someService.save(data).then(function () {
Form.$setPristine();
});
};
I have 2 models, both JSON data. One is generated by user input in a form, the other is data provided by an API and is modified by user input in the same form.
here is the form in the view:
<form method="post" name="form" role="form" ng-controller="ContactFormController as ctrl" ng-submit="form.$valid && ctrl.sendMessage(input, ctrl.cartItems)" novalidate>
<p ng-show="success">Thanks for getting in touch!</p>
<p ng-show="error">Something went awry with your submission!, please try again.</p>
<div class="formgroup">
<legend>Express Order Form</legend>
<div id="formHeader"></div>
<fieldset>
<div class="inputItem">
<label for="name">Name:</label>
<input class="form-control" type="text" id="name" name="name" ng-model="input.name" required>
</div>
<div class="inputItem">
<label for="email">Email:</label>
<input class="form-control" type="email" id="email" name="email" ng-model="input.email" required>
</div>
<div class="inputItem">
<label for="School">School:</label>
<input class="form-control" type="text" id="school" name="school" ng-model="input.school" required>
</div>
<!-- Form Items -->
<div ng-repeat="item in ctrl.cartItems">
<div class="col-sm-6 cartItemLabel" ng-bind="item.label"></div>
<div class="col-sm-2 inputItem">
<input class="form-control" type="text" id="item.id" name="item.id" ng-change="ctrl.updateSub(item)" ng-model="item.qty">
</div>
<div class="col-sm-2 inputItem">
<input class="form-control" type="text" id="item.id" name="item.id" ng-model="item.value">
</div>
<div class="col-sm-2 inputItem">
<input class="form-control" type="text" id="item.id" name="item.id" ng-model="item.subTotal">
</div>
</div>
<!-- /Form Items -->
<div class="inputItem">
<label for="messsage">Message:</label>
<textarea class="form-control" rows="4" id="messsage" name="message" ng-model="input.message" required></textarea>
</div>
<div class="hidden">
<label for="honeypot">I promise I'm not a bot</label>
<input type="text" id="honeypot" name="honeypot" ng-model="input.honeyPot">
</div>
Here is the model that is NOT generate by the form above:
self.cartItems = [
{'id': 1, 'label': "Band-Aids (box)", 'value': 1.5, 'qty': 0, 'subTotal': 0},
{'id': 2, 'label': "Binders – 1/2”", 'value': 6.5, 'qty': 0, 'subTotal': 0},
{'id': 3, 'label': "Binders – 1”", 'value': 6.5, 'qty': 0, 'subTotal': 0},
{'id': 4, 'label': "Binders – 1 1/2”", 'value': 7.5, 'qty': 0, 'subTotal': 0},
{'id': 5, 'label': "Binders – 2”", 'value': 8.5, 'qty': 0, 'subTotal': 0}
]
I need to upload all data from both JSON arrays to an API. I tried to concatenate the 2 JSON arrays like this (the function that is called on submit in the form):
self.sendMessage = function( input, items ) {
var output = input.concat(items);
....[on to my $http call]
but I get a type error.
Forgive me if I left out info you need; I am a newbie to Angular.
You might like to take a look at angular.extend, I think it should solve your problem.
angular.extend doc
A type error usually means that a type is not what you expected. I would guess that input is not an array. Try changing your code to this:
var output = items.concat(input);
Edit: To further track down the issue, you can add a debugger; statement in your code to break in the code at runtime. Then you can verify the types are what you expect by opening the dev tools console in your browser while running that piece of code.
To all who helped me on this issue, a big thank you!
#ragingprodigy put me on the right track.
I had to change the input within the method in my controller to:
var output = [input].concat(items);
I also had to change the form elements' binding to include the controller (as ctrl)
ng-model="ctrl.input.[each form element on input]"
Thanks again to all who helped! I hope this answer helps someone else.
It would help if you could provide full code for investigation.
My guess is that you have an issue calling sendMessage, since 'input' is part of your model try calling it like this:
self.sendMessage = function(items ) {
var output = self.input.concat(items);
}
or if you have defined scope:
self.sendMessage = function(items ) {
var output = $scope.input.concat(items);
}
I usually use jquery with angular.
If this is your case, you could use $.extend (true, {}, obj1, obj2)
put your most valuable object at the end (probably the edited by the user), just in case you have the same property on both and wanna stay with only one of them.