I am looking for a time control which can provide suggestions of certain times but
It should provide suggestions onclick, i.e. you click the field and suggestions are showcased as a list, not that you have to type in something.
What i have found: Input with type="Time"
<Input type="Time" suggest="onSuggestTime"/>
Issue: it delievers suggestions when you type something in, i need for it to be onclick, as you click the input field your recieve your suggestions
Related
I have an issue with the native mat-input type date. At the moment if a user manually types in a date that isn't a real date i.e. 02/31/2022 the value of the input isn't set which leaves it with a "required" error. Obviously, that would make sense and does stop the user and makes them change the date to something that does exist. I'd like something a little more user friendly.
The Material DatePicker handles this very nicely
https://material.angular.io/components/datepicker/overview
When this situation happens it rounds it up to the next available date i.e. 02/30/2022 -> 03/01/2022. However, it is very important that I achieve this goal using the native tag.
<mat-form-field required>
<mat-label>Date</mat-label>
<input matInput type="date" formControlName="dateControl"/>
</mat-form-field>
Some ideas that I am researching and will add to this post if I find insight
Disabling typing the date manually (forcing use of the DatePicker UI)
Rounding up the date to a useful date
I want to trigger the parsley-error on an input text field only at the time of 'focus out' and not on change event.
These are the steps I perform to produce the issue:
Enter some invalid characters in the text field. At this point of
time, the parsley-error is not trigerred (OK, as per my
requirements).
When I tab-out of the field, the parsley-error is trigerred and I
see the error on the tooltip of the text box (OK, as per my
requirements).
Now, when I again go back to the same text field and start entering
some more characters, the parsley error is trigerred (This is the
ISSUE).
I don't want the user to be bugged by the error appearing on the tooltip while he is making the changes. The error should be appeared only at the time of focus out but on this third step, the error is appearing at the time of 'change' as well.
I am not sure how can I tell Parsley to avoid some certain triggers!
Any suggestion?
Please note that the issue is not faced on the first step. The issue is faced only at the 3rd step mentioned above.
Here is my code:
<input type="text" class="form-control border-radius-6 onClickHideError"
id="passport_number" name="passport_number" required=""
maxlength="30"
placeholder=""
data-parsley-password-field="true"
data-parsley-trigger="focusout"
data-parsley-pattern="/^[a-zA-Z0-9]*$/"
data-parsley-required-message="${commonRequiredMsg}"
data-parsley-pattern-message="${passportInvalidMsg}"
autocomplete="off">
Parsley allows you to set data-parsley-trigger-after-failure to your choosing.
Is there any way to open the ngx-typeahead when a user enters the input. In other words, on focus
I can get the dropdown to open if I type a single character into the input box, and then hit backspace.
just add this to the input
[typeaheadMinLength]="0"
Setting [typeaheadMinLength]="0" is the way to do this, but it also has the side effect of triggering a search even when nothing is typed in yet. I my case I needed to run the search on focus, but only if the textbox already had some content. I did this using a reference to the input's value:
<input #searchBox
[typeaheadMinLength]="searchBox.value?.length > 0 ? 0 : 1"
/>
You will need to do two things to make this possible:
First, set [typeaheadMinLength]="0" to have the input open when nothing has been typed yet.
Secondly, since the type ahead input is the first field in the form, you may need to add a small delay by also setting [typeaheadWaitMs]="300 (or some value). This is because the input may receive focus before the values are available.
Example:
I'm wondering if there is a way to allow a form to be selected (clicked) but at the same time make the form unable to have text entered.
I've tried using readonly which gave me the functionality but the cursor it provides is the same as if I set disabled=true and it greys out the input field which is confusing for the user. Is there any alternatives?
<input class="notype" />
$('.notype').on('keydown', function(e){
e.preventDefault();
})
What you haven't told us is why. If it's because you want it to be copied to clipboard but not changed, the above won't let you do that, if so please elaborate.
I have a form box that I want to be always selected. I was able to get it to select everything in the box when it is clicked (using onFocus="this.select()") but I want it to be selected 100% of the time. The text in the box will be always changing, so I tried using onChange="this.select()" but that didn't work. Here's what I have:
<form>
<input type="text" id="txt1" size="30" maxlength="1"
onkeyup="showHint(this.value)" onFocus="this.select()" onBlur="this.select()"
onChange="this.select()" value="Click here, then press a key"/>
</form>
Basically I just tried to call everything in hopes that something would work, but it is still acting as if only onFocus="this.select()" is there. By the way, this is for controlling something via keyboard, which is why the maxlength is only 1. I want it to be always selected so that when new key are pressed, the last command will be changed without having to use backspace.
Is there a reason you aren't just using document keystroke detection? If you need the value to appear in the input field for some reason, once you detect the keystroke, you could fill the text box. This would be much simpler than trying to maintain focus on the field itself.