Here's a situation: I have a regular non-Vue component color picker with the simple <input type="color"/> which works almost perfect, except in one case. The case being, when there's already a color existing in the picker and all the user does is click "Ok". I would expect that the vue #input or #change event would fire and set the color value even if the user didn't choose a different color. However, when the user simply clicks "Ok" and does not choose a new color, there is no event fired for either #change or #input. What's a way to fire this event in such a case?
That functionality is unfortunately not available.
You can use #focus, with the caveat that it will fire when you click, and when you exit (cancel or OK)
You could add some custom #blur and #focus events to get something similar, but I think using just #focus (triggered on click too) may work in most scenarios
Related
Is there any way to make an editable Vuetify stepper where I can make a validation that prevents the event of clicking on another step if the validation is incorrect?
I tried to modify the default event of the editable stepper-step with some event modifiers, like making an event I made before the Vuetify event and saying inside if I want to continue with the default event.
Currently the v-select change event will fires multiple times during user typing keywords.
Is there any event will be only fired if user has select an option or press Enter to select an option.
I don't want the change event be fired during user typing keywords.
V-Select#Events
Unfortunately, it looks like the change event only has a parameter that is the value of selected option. There is not event passed through for you to check what actually raised the change event. However, looking at the link above, there are other events you can use.
There is a keydown event listed here that you might be able to leverage. It takes in a keyboard event, you should be able to check what keyboard event was raise i.e. 'Enter'. There are also other events such as mousedown or mouseup.
I'm trying to trigger ht-get of a form based on the change of any of the radio buttons in the form without the user having to hit the submit button. Therefore, I'm trying to use the hx-trigger attribute on the form with the from:find feature, but I keep getting an htmx:syntax:error in the console and no triggering.
<form action="/cvss/calc" method="get" id="cvss-calc" novalidate hx-get="/cvss/calc/cvss_details_html" hx-trigger="from:find form#cvss-calc .btn-check">
All the radio buttons have the btn-check class defined on them. I've also tried from:find .btn-check but that doesn't work either.
What would be the proper format for doing this?
UPDATE: I figured it out, I was apparently trying to be too fancy. I changed the hx-trigger to be just "change" and it works wonderfully since the form only has radio boxes.
It would still be nice, though, to know how to listen for change signals from only specific sets of inputs.
I am trying to sort out a user interface problem where an enter key pressed in an input field is effectively firing a click event on a button (presumably because it now has the focus). The button in question has a prevent modifier on its click action (i.e., <button #click.prevent="blah">), but that doesn't help. What I want to do is ensure that the button action is only executed by an actual click on the button, not by enter in a preceding input field.
LATER: I have this working now using <a #click.prevent="blah"> instead, with the link styled as a button via Bootstrap. This doesn't have the problem - an Enter key doesn't fire the handler. It seems insane to me that there is no way of distinguishing between a mouse click on a button and the Enter key firing it. Both are seen as a MouseEvent, and I can find no way of differentiating between the two.
Actually, the answer was extraordinarily simple, but not immediately obvious. I was using plain <button>. I had forgotten to add what the type tag, which I normally would, thus: <button type="button"> Once this was in place, the Enter key no longer fired it.
What worked best for me was an empty #click.prevent="" in combination with #mousedown.prevent="myfunction".
This:
prevents the 'Enter' key from triggering a click
keeps the tag from receiving focus on click (except on keyboard navigation)
prevents page reload on any href="#"
My fiddle: https://jsfiddle.net/j8fchbvk/37/
In a similar situation I fixed it by getting rid of the <form> tag . Since Vuex was handling form-submission, I did not need the form tag anyhow.
I have a textbox that when focused it calls an ajax request and populates a list for the user to choose from. Basically just recreated the dropdown using a textbox instead of a select.
The problem is that if I click on the textbox the browser does not recognize the tabindex of the input. Instead it resets its self and starts back at 0. If I tab to the next element tabs work fine, only when I click in the input field to give it focus does it start acting up.
I did notice last night if I put an alert in the page on the focus event that it seems to work. Guessing because the browser focuses on the elememt after I click the ok button.
has anyone heard of this before?
found what was causing the problem. I was calling .blur() on keydown and code was 9 or 13 (Tab/Enter). Not sure why this would give me the problem I was having. I would have just thought the blur event would have executed twice. However I suppose that I was forcing blur on keydown and the current tabindex was not being set. If this is the case then If I needed to I should beable to call blur() onkeyup event.