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.
Related
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 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.
I am new to Objective c programming. I have created an application which has a UI with two buttons "Cancel" and "Ok". On clicking "Cancel", the application must terminate and clicking "Ok" must perform some task. Everything works fine. I am able to tab between these buttons and can call the required functionality by clicking space button.
All I want to do is, that when focus is on "Cancel" button(using tab key) then on clicking enter button from keyboard, my application should terminate and similarly, when focus is on "Ok" button then clicking enter should perform the desired functionality.
I have even set the 'setKeyEquivalent" property of the "Ok" and "Cancel" button, but I can only set unique keyequivalents. I also tried to read the title or tag value of the buttons and then call the required functionality but it didn't worked too.
Can someone please guide me how can I use enter button to invoke different functions depending upon the selected button in UI.
I think you don't want to set key equivalents for the buttons. You would want to override keyDown: and test for the enter key, then do the appropriate thing depending on which button had focus (which I think you could determine using NSWindow's firstResponder method).
I am having trouble getting Selenium IDE to click the Submit button on one of my webforms after having selenium open and fill out the form. I am using the clickAndWait command and identifying the button by its ID:
<td>clickAndWait</td>
<td>id=ctl00_ContentPlaceHolder1_OSVFHResults_btSave</td>
<td></td>
Interestingly, if I write a script that simply opens the form and clicks the submit button without filling it out, I am not having any problems. My problem is coming specifically after I've asked Selenium to fill out the form. Additionally, if I try to manually click the submit button, it doesn't work if the Selenium script to fill out the form was run before my manual input. If I manually open and fill out the form, I have no problems clicking submit, and Selenium works for all of the other form's submit buttons on the site. Anyone have any ideas?
Instead of filling form with type command you can try typeKeys one. It simulates keystroke events on the specified element, as though you typed the value key-by-key and probably enable your submit button.
It sounds like some javascript event unrelated to click() (such as mouseover or onkeydown) is attached to one or more of the form fields and is responsible for enabling the submit button.
You'd have to look at which exact events are being fired, either by looking at the source with something like firebug, or by using a javascript debugger. Then modify your Selenium script to make sure the same events get triggered.
After type the values in the form just try "ClickAtandWait" instead of "clickandWait"..i also face the problem once and it gave hands once..
selenium.clickAtandWait("locator", "position");
if you know the exact "position" just put it, otherwise leave it as an empty string.
Is it possible to capture keyboard events within a diagram produced using Dojox.GFX?
We have a simple graphical application which involves some shapes drawn on a surface. We would like to add some simple keyboard interaction, e.g. using the Delete key to delete a shape, and using "Ctrl+A" to select all shapes.
I have tried adding dojo.connect and shape.connect statements for "onkeypress" and "onkeyup", but they never seem to get triggered. We are already capturing mouse events and these are working fine.
Thanks
David
Keyboard events are not pointed, they are essentially global. You should catch them globally attaching a handler to document or body.
Thanks, now working!
In my case this was a portlet so the <body> tag was not available, but I used a <div> tag instead:
<div id="queryPortlet" onkeydown="handleKeydown(event.keyCode);" onkeyup="handleKeyup(event.keyCode);">
The other thing I had to watch for was not intercepting keystrokes if the focus was in a text input field. I had to write some code to keep track of when the focus was in a text field, by adding onfocus() and onblur() handlers to all such fields. This was a slight pain but was the only way I could find to do that.