i want to focus a disabled button.
i have a form with some inputs, ng-repeats and a confirm button.
if i tab throw these elements all works fine. but if my confirm button is disabled it dont get the focus. any idears how to give the focus in the right order if its disabled?
this is the button:
<button type="submit"
class="btn btn-adesso"
ng-disabled="!newRepoForm.$valid||isSend">
Absenden
</button>
the validation (via REST) of the last input field is triggered when the focus is lost. so if you fill in the last field and tab on, the confirm button is disabled cause form "waits" for the rest validation. so the confirm button is disabled for the moment of REST validation and dont get the focus but it should get the focus. and then the button will be enabled when validation finished
Hans, see this post : AngularJS and Tab Order (Disabled Buttons)
(it seems that certain browsers pick up the focus and others do not. There is also a 'hack' (workaround) given, which might suit your immediate needs)
GL!
Related
This is the mock-up of a child window that I have in a Windows Forms application.
This will be shown when a button is clicked on the parent window.
When the child form opens up, the focus is in Text box1.
The Leave event on the Text box1 fires when the user tabs out of it or clicks on any button.
This triggers a validation:
if(String.IsNullOrEmpty(textBox1.Text)
{
MessageBox.Show("Please enter a value of Id.");
}
else {
... other logic omitted for brevity
}
Now the user can also click on the Cancel button to exit the form without doing any action.
Here, on the first try, the Leave event fires because the focus is in Text box1 when the Form is loaded so when the user clicks on Cancel for the first time the form does not close, instead the message box with validation message is shown.
On the second click, since the focus is no longer on Text box1, the Leave event does not fire and the form closes.
I can put the focus on any other control to handle this but for the sake of user experience I had to put the focus on Textbox1 since it's value decides the further logic of what is shown in Textbox2(Textbox1 can be left empty in which case nothing is shown in Textbox2 but that is not related to this question).
Tried this to see if I can get the Cancel button inside the Leave event of Textbox1:
Button b = sender as Button
b is NULL when Cancel is clicked.
What can I do to make the Cancel click work, without triggering the Leave event initially?
Thanks in advance,
Regards.
If you only want to supress the error message when the cancel button recieves the focus, simply check for the cancelButton.Focused flag in the leave event, then block the message if the cancel button got the focus.
Nevertheless, it is usually considered good practice to avoid modal dialog boxes if they are not required. So depending on your particular situation, you may decide to replace the MessageBox with a ToolTip instead, which will not entirely block the UI thread.
I'm checking this example in react-hook-form doc: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/index.js
Weird thing is that the button doesn't have type="submit". But it still triggers submit event after clicking. (Screenshot attached below.)
How does it know which button is the submit button?
If a button is inside a form, then by default it is given the submit type, unless you give it another type.
So the Reset button in that codesandbox has type="button" to prevent it triggering the event, but the Submit button leaves it blank, so it submits by default.
Reference: Moz Docs
I have a form wih many fields in it and a close button at the end. Only in IE, when I tab out of the button, instead of going to the first field in the form, it tabs to the browser url and then to the tabs open in browser and home icon and all browser icons on the top. So, what I want to do is to catch the tab event on close button and bring the focus back to the first field in the form. So, I tried using specialkey, keyup and keydown in the listeners for the button. But, none of them were called when tab event was fired on button. I have enablekeyevents:true in the configuration. Can someone suggest me a way of capturing the tabout event on button. Thank you so much.
I solved it by using blur event on button. I check on blur whether Ext.EventObject.Tab and Ext.EventObject.shiftKey exists
I have one form with some fields with submit and reset button. I am using cakephp model validation to validate empty and special characters.
If I enter invalid data and submit the form, its displaying error message.After that I click on reset button,its not reset the form. Before validation error message its working fine.
My reset button code is
<input type="reset" class="uiBtn" value="Reset" name="reset"> <input type="submit" class="uiBtn" value="Save Section" name="">
Also I used jquery reset function, its also not working..
Please any one help me what is the problem???
It doesn't work because HTML Reset buttons reset the controls in a form back
to the value they were when the page first loaded. When you post back, the
PHP engine sets the values of the controls again, so the Reset would do
nothing more than change the controls back to what they were when you loaded
the page after the postback.
The only solution to this is to either do it client-side with javascript or
server-side on a postback. Just iterate through all of your controls and set
their properties appropriately.
Following Js Code would certainly work, assuming you don't have another onload event already set.
window.onload = function () {
for(var f in document.getElementsByTagName("form"))
f.reset();
}
This post might help you to reset the form after submit.
I have two button on form as:
Now when hover the portion common to both button the enabled button shows the mouse hover effect as:
I am not sure why this is done in windows form.
I have checked the same thing in WPF sample it works just fine, There it does not show any effect when we are on disabled button.
If we click on the portion which is common for both button the click for Enabled button is fired.
I want to know why controls have this behavior?
Try putting the disabled button in a panel or a group. Controls aren't really meant to overlap like that, so I expect that the event handler just passes the click through to the enabled button.