I'm trying to prevent autofocus that happens when I put md-button inside md-menu --> md-menu-content element.
On some of the pages inside "md-menu-content" there is a form with some md-input container elements, textArea, etc, and in the end, there is a "Submit" button (md-button).
When I come to this page there is always autofocus on the submit button even though I set a focus on the first drop-down element in the form.
On Firefox I'm even can't click on the input element (in my case email line) because the focus goes straight to the md-button.
Thanks in advance.
Related
Currently creating a form with Bulma and the entire site is stock dark mode, so to match the theme, I want the form boxes to match. I found that styling with <input class="input"> didn't work well as you cant read the placeholder text and you cant fix that issue without the use of Sass. With that being said, I found that giving the input elements class="button", before then styling them in the same way as I would a button element, working perfectly! However, I also have a textarea element, and when I tried to do the same with it, it no longer had line wrap.
Is there any way that I can add line wrap back to the textarea element, ideally without the use of Sass?
This is ruffly the textarea element that i was using:
<textarea class="button is-outlined has-background-black has-text-light has-text-left" placeholder="Placeholder Text"></textarea>
Example Images:
Ex. What's happening
Ex. What I'm Looking For
I have an anchor tag within a button tag description in HTML as below:
<button type="submit" onClick="handleSubmit()">Desc....
Click here for more details
</button>
Now when I click on the anchor text, the action "handleSubmit()" executes instead of going to my https:// link.So apparently, my text is also being treated as a button instead of a hyperlink.
I tried adding the z-index property to my CSS for (z-index: 1) in order to make it independently clickable so it overlays on top of the button tag, but no joy!
But if I right-click on the text, I do see the option of opening the https link in a new tab and it does so perfectly. Only when I click on it normally(left click), the button click handler executes as if its the button being clicked instead of the anchor tag.
How can I fix this? Any help would be much appreciated, thank you.
I don't quite understand if you intend to use the function inside the onClick in any situation.
You can swap the wrapping of elements so that the button is inside the link; also you could move the link inside the onClick like this:
onClick="window.location.href='link'"
Thought these can be a couple solutions, you need to clarify the exact behaviour you expect to obtain from your code.
there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
demo
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
I'm working to make a page accessibility compliant. I have a few form elements that I can only reach once I click on an element in that form. If I load the page and hit tab, it cycles between a few links at the top of the page. If I click on one of the form elements, it gets focus, then I can tab to the other form elements. If I tab out of the form, I can't return with out clicking. Any idea what's going on here?
I would try to attach the attribute tabindex to the form inputs.
<input type="text" tabindex="3"></input>
http://www.w3schools.com/tags/att_global_tabindex.asp
This is probally small question for a pro.
i want to know if i replace input submit button with button (type=submit), would it still be trigger on enter (keyboard) and if yes, then which browser wont trigger it?
<button type="submit"><span>i was replaced from input button</span></button>
span was added just for css fancy button style
It should be triggered in all standard compliant browsers, since type="submit" creates a submit button:
Buttons created with the BUTTON
element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities:
same thing, the button allows you to put content, like text or images