I have a button in my webpage with below code -
HTML:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>
CSS:
.checkout-button{
width: 130px;
height: 35px;
background: url('../poc2/images/checkout.png') no-repeat;
border: none;
vertical-align: top;
margin-left:35px;
cursor:pointer;
}
Now, the button works fine as I can click on it and have my corresponding php code run; the pointer turns into the hand symbol letting the user clearly know that it is clickable and that its a button.
What I would like to do is to modify the behavior of this button based on some conditions. Example pseudocode:
if flag=1:
/* enable the button, and let the user click it and run the php code */
else:
/* display this button, but don't let any actions take place if the user clicks on it; */
How do I code this enable-disable logic for the button? Basically, I want the button to work as a button under normal situations; and just as a picture without any hyperlink under certain other situations.
You can either do this without JavaScript (requires a page refresh) or with JavaScript and have no refresh.
Simply use the disabled attribute:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>
And create a css style for it, if necessary. The example below shows a JavaScript solution. If the variable disableButton is set to true, the button will be disabled, else it can be clicked:
const disableButton = true; //change this value to false and the button will be clickable
const button = document.getElementById('checkout-button');
if (disableButton) button.disabled = "disabled";
.checkout-button {
width: 130px;
height: 35px;
background: #333;
border: none;
vertical-align: top;
margin-left: 35px;
cursor: pointer;
color: #fff;
}
.checkout-button:disabled {
background: #999;
color: #555;
cursor: not-allowed;
}
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button">submit</button>
You can do it either by modifying the attribute or by adding/removing a class.
Modifying attribute
You will want to switch between <button disabled="true"> and <button disabled="false">
With javascript, it could look like this:
if flag=1:
document.getElementById("your-btn").disabled = true;
else:
document.getElementById("your-btn").disabled = false;
And with jquery, like this:
if flag=1:
$('#your-btn').prop('disabled', true);
else:
$('#your-btn').prop('disabled', false);
Adding/removing class
Add the following css:
.btn-disabled{
cursor: not-allowed;
pointer-events: none;
}
And add/remove a class to the button.
With jquery:
if flag=1:
$('#your-btn').addClass('btn-disabled');
else:
$('#your-btn').removeClass('btn-disabled');
If you don't want jquery, but pure javascript, here is how to do it.
If your circumstance allows you could just remove the content in the action attribute from the form tag. Therefor when a user clicks submit, no action is taken.
Related
I want to make a button that changes the text inside the button by pressing the button, but I don't know how! :(
I used :hover, but when I move the mouse pointer away, it goes back to its previous state.
There is the possibility of solving it with the pseudo-class :hover and the use of data attributes. The idea of this solution is that you hide the original button text, add an empty content and then use hover over the element to show the content of the data attribute.
I'll show you how in the following example:
body {
background-color: #F2CD5C;
text-align: center;
}
.container {
margin-top: 30vh;
}
/*
MARK BUTTON:
In the button styles, it is necessary to hide the original text that we generated, to create the correct spacing and the data attribute text can overlap
The text color must be the same as the button background.
Position must be relative.
*/
.button {
position: relative;
padding: 0.5em 1em;
border: 2px solid #fff;
border-radius: 15px;
font-size: 2em;
color: black;
background: black;
}
/*
MARK USE :before and :after
Setup pseudo-element ::before with content: ""; and position must be absolute and setup with the original position text inside the button.
Write ::after with the exact text inside button = Click me! with the same position and setup to ::before pseudo-element
*/
.button::before {
content: "";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 0;
color: white;
}
.button::after {
content: "Click me!";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 1;
color: white;
}
.button::before {
content: attr(data-hover);
}
.button:hover:before{
opacity: 1;
}
.button:hover:after{
opacity: 0;
}
<div class="container">
<button class="button" type="button" data-hover="Hello world!">Click me!</button>
</div>
The code uses pseudo-elements ::before and ::after to display different text when the button is hovered over. The text "Click me!" is set as the content for the ::after pseudo-element, while the ::before pseudo-element gets its content from the "data-hover" attribute. When the button is hovered over, the ::before pseudo-element's opacity becomes 1 and the ::after pseudo-element's opacity becomes 0, effectively hiding and showing different text on the button.
I hope this can help you solve your question. Anyway, this solution is not clean, we should handle the DOM using JavaScript.
Reference Links
Using data attributes
I only know how to do this using javascript, hope that helps.
HTML
<button class="btn">Hey, click me!</button>
JS
first I store the button in a variable
var button = document.querySelector(".btn")
then I add an event listener to the button with the "click" event, which will make the function "function()" be executed whenever the button is clicked
button.addEventListener("click", function(){})
now, I define the function to change the text of the button using "this" to access the button of the function and ".textContent" to change the text that was inside
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
Click "run" for a preview
var button = document.querySelector(".btn")
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
<button class="btn">Hey, click me!</button>
What is a custom HTML code for having a link (say abc123.com) which is of certain size and color and which opens in a new/blank tab.
Have tried blank standalone with link but need to know how to change the size and font color of the the link word "SUBMIT"
Ok, so what you need is to use the anchor tab which is In this to put the url is to use the href attribute and then the url. To chance the color and size and all of that would require you to have a class or id for the link. Then using CSS, you could format this link. use the color tag to change text color, and font-size to change the font size. For example, this is what I would do.
<style>
.link {
color: blue;
font-size: 30px;
}
</style>
Submit
Or, if that isn't what you want, you could try using a button and then an onclick function that opens a new link in a new tab. Try this code :
function submit() {
window.open('abc123.com');
}
<style>
.submit-button {
outline: none;
border: none;
background-color: transparent;
color: blue;
font-size: 40px;
}
.submit-button:hover {
text-decoration: underline;
}
</style>
<button class="submit-button" onclick="submit()">Submit</button>
How do I open a new page from a button in a Dialog Box?
This box is created using:
var html = HtmlService.createTemplateFromFile('File')
And this is the File.html:
function sabermais(){
window.open('www.google.com')
}
<input type="button" class="action" value="Learn more" onclick="sabermais()" />
It works if the box is called with:
var html = HtmlService.createHtmlOutputFromFile('File')
But in this case, I can't use scriplets,and I need them.
This sounds a bit confusing but I guess someone can help.
Thanks in advance!
You need to use IFRAME mode:
var html = HtmlService.createTemplateFromFile('File')
.evaluate()
.setWidth(450)
.setHeight(450)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
My first answer below:
And <a> tag in a dialog box will open a link in a new tab.
button
That's not a button, but you can use a link, and style it to look like a button.
<a style="border: 1px solid #990000;
background-color: #CCCCFF;
margin-left: 10px;
padding: 0 1em;
height: 2em;
width: 30px;
cursor: pointer;
text-align: center;
" href="https://www.google.com">button</a>
I'm trying to replace checkbox/radio inputs with icons. For this, I need to hide the original checkbox/radio. The problem is, I also want the form to properly support keyboard input, i.e. let the input remain focusable by Tab key and selectable using Spacebar. Since I'm hiding the input, it cannot be focused, so instead, I'm trying to make its <label> focusable.
This documentation and various other sources led me to believe I can do that using tabindex attribute (corresponding to HTMLElement.tabIndex property). However, when I try to assign tabindex to my label, it remains as unfocused as ever, however much I try to Tab to it.
Why doesn't tabindex make the label focusable?
The following snippet demonstrates the issue. If you focus the input with your mouse and try focusing the label using Tab, it doesn't work (it focuses the following <span> with tabindex instead).
document.getElementById('checkbox').addEventListener('change', function (event) {
document.getElementById('val').innerHTML = event.target.checked;
});
<div>
<input type="text" value="input">
</div>
<div>
<label tabindex="0">
<input type="checkbox" id="checkbox" style="display:none;">
checkbox: <span id="val">false</span>
</label>
</div>
<span tabindex="0">span with tabindex</span>
(The JavaScript code just allows to see that clicking on the label properly (un)checks the checkbox.)
Why doesn't tabindex make the label focusable?
Short Answer:
Label is focusable.
TabIndex won't make any difference.
Welcome to the world of browser/agent inconsistencies.
tl;dr;
The label (Ref) element is very much focusable. Its DOM Interface is HTMLLabelElement which derives from HTMLElement (Ref) which in turn implements GlobalEventHandlers (Ref) and hence exposes the focus() method and onfocus event handler.
The reason you are unable to get hold of proper specification / reference document for labels focus behaviour, is because you might have been looking at HTML5 Specs. Interestingly, HTML5 refs do not state anything relating to that, which adds to the confusion.
This is mentioned in the HTML 4.01 Ref here: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
Specifically near the end of section 17.9.1 and just before 17.10:
When a LABEL element receives focus, it passes the focus on to its
associated control.
Also, elsewhere (I am unable to get hold of that part of the ref) I have read that it depends on the implementing agent. (Don't take my word for that, am not too sure).
However, what it means is that when you focus a label (or a label received a focus), that focus is passed on to its associated labeleable control. This will not result in two different focuses, but one focus on the input (in your case a checkbox). Because of this behaviour, tabindex property cannot play a role.
There is also a test suite by W3C for website accessibility (WAAG) here: http://www.w3.org/WAI/UA/TS/html401/cp0102/0102-ONFOCUS-ONBLUR-LABEL.html which, discusses the implementation of onfocus and onblur for a label. Ideally a keyboard or an assistive technology that emulates the keyboard should implement this. But...
This is where the browser inconsistencies play their role.
This can be demonstrated by this example. Check the following snippet in different browsers. (I have tested it against IE-11, GC-39 and FF-34. All of them behave differently.)
Click the button "Focus Label"
It should focus the label, then pass the focus and highlight its associated checkbox outline in blue.
Chrome-v39 works. IE-v11 it doesn't (somehow html and body do respond to :focus). FF-v34 it works.
Talking about browser inconsistencies, try using the "access key" L. Some browsers will focus the checkbox whereas some will click it i.e. pass the action to it.
Here is a fiddle to test it: http://jsfiddle.net/abhitalks/ff0xds4z/2/
Here is a snippet:
label = $("label").first();
$("#btn").on("click", function() {
label.focus();
});
* { margin: 8px; }
.highlight { background-color: yellow; }
:focus {
outline: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" value="input" /><br />
<label for="chk" accesskey="L">Checkbox: </label>
<input id="chk" type="checkbox" /><br />
<input id="btn" type="button" value="Focus Label" />
Hope that clears up your doubts.
.
Your problem:
Now focussing (sic) on your original problem of not being able to focus a label, because you want to style a checkbox differently by placing an icon kind of thing in its place.
In order to do that, one option for you is to not hide it completely by doing a display:none;. Rather, make it 1x1 pixel and shove it under your icon. This way it will still receive focus naturally and yet be effectively hidden.
For example, if your icons are a checkmark and a cross, then change the position of the checkbox and make the icons out of ::before or ::after pseudo-elements on the label. That will cause the checkbox to still receive focus, and make the icon respond to that. That will give the apparent illusion of the icon taking the focus.
Demo Fiddle: http://jsfiddle.net/abhitalks/v0vxcw77/
Snippet:
div.chkGroup { position: relative; }
input#chk {
position: absolute;
width: 1px; height: 1px;
margin: 0; margin-top: 4px; outline: none;
border: 1px solid transparent; background-color: transparent;
}
label::before {
content: '\2714';
position: relative;
width: 18px; height: 18px;
background-color: #fff;
margin-right: 8px; padding: 2px;
display: inline-block;
border: 1px solid transparent;
}
input#chk:checked + label::before {
content: '\2716';
}
input#chk:focus + label::before {
border: 1px solid #00f;
}
<input id="txt" type="text" value="input" /><br /><br />
<div class="chkGroup">
<input id="chk" type="checkbox" />
<label for="chk" accesskey="L">Checkbox</label>
</div>
.
Since this old post is one of the top google results for html label tabindex I want to add my very simple working solution. As #Abhitalks mentioned in the accepted answer, the focus of a label is passed to it's associated control. So to bypass this behavior, just add a tabindex to the label and use event.preventDefault() in a focus EventListener.
#Heretic Monkey kind of had the right idea in his answer but you don't need a wrapper element to achieve this. You will, however, need to manually forward any required keystrokes (like spacebar) through.
For example:
'use strict';
let field = document.getElementById('hidden-file-chooser');
let label = document.querySelector('label[for=hidden-file-chooser]');
// prevent focus passing
label.addEventListener('focus', event => {
event.preventDefault();
});
// activate using spacebar
label.addEventListener('keyup', event => {
if (event.keyCode == 32) {
field.click();
}
});
#hidden-file-chooser {
display: none;
}
input[type=text] {
display: block;
width: 20rem;
padding: 0.5rem;
}
label[for=hidden-file-chooser] {
display: inline-block;
background: deepskyblue;
margin: 1rem;
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.7);
cursor: pointer;
}
<input type="text" placeholder="Click here and start tabbing through ...">
<input id="hidden-file-chooser" type="file">
<label for="hidden-file-chooser" tabindex="0"> Select a File </label>
<input type="text" placeholder="... then shift+tab to go back.">
P.S: I used input[type=file] in my example because that's what I was working on when I ran across this issue. The same principles apply to any input type.
Edit: The following was a misreading of the spec:
Looking that the full
specification,
you'll see that there is something called tabindex focus
flag,
which defines if the tabindex attribute will actually make the field
"tabbable". The label element is missing from that list of suggested
elements.
But then again, so is the span element, so go figure :).
That said, yYou can make the label text focusable by wrapping the whole thing in an another element, or using some JavaScript to force the issue. Unfortunately, wrapping (here in an anchor) can men a fair amount of extra work in CSS and JS to get working like a normal label element.
document.getElementById('checkbox').addEventListener('change', function(event) {
document.getElementById('val').innerHTML = event.target.checked;
});
document.getElementsByClassName('label')[0].addEventListener('click', function(event) {
event.target.getElementsByTagName('label')[0].click();
event.preventDefault();
});
document.getElementsByClassName('label')[0].addEventListener('keypress', function(event) {
if ((event.key || event.which || event.keyCode) === 32) {
event.target.getElementsByTagName('label')[0].click();
event.preventDefault();
}
});
.label,
.label:visited,
.label:hover,
.label:active {
text-decoration: none;
color: black;
}
<div>
<input type="text" value="input">
</div>
<div>
<a class="label" href="#">
<label tabindex="0">
<input type="checkbox" id="checkbox" style="display:none;">checkbox: <span id="val">false</span>
</label>
</a>
</div>
<span tabindex="0">span with tabindex</span>
As previous posters said:
Label focus always goes directly to the input element.
Quite an annoyance if somebody has fancy (but fake) checkboxes, hiding the original ones, with an actual focus for keyboard navigation nowhere to be seen.
best solution I can think of: javascript.
Style-away the actual focus, in favor of a fake one:
input[type=checkbox]:focus {
outline: none;
}
.pseudo-focus {
outline: 2px solid blue;
}
and watch for changes on the (in many scenarios visibly hidden) original checkbox:
$('input[type=checkbox')
.focus( function() {
$(this).closest('label').addClass('pseudo-focus');
})
.blur( function() {
$(this).closest('label').removeClass('pseudo-focus');
});
Full jsfiddle here.
For input type radio or checkbox:
opacity: 0;
height: 0;
width: 0;
min-height: 0;
line-height: 0;
margin: 0;
padding: 0;
border: 0 none;
and the Js above does the trick sweetly.
I am using the Webshims library for polyfilling the validation of a HTML5 form. The problem is that in order for the validation to kick in I have to use an input submit button. This is something that I wish to avoid, since I have a css-styled "linkbutton" for the purpose of saving the form:
<a href="#" id="myLink" class="submit">
<em> </em><span>Save form</span>
</a>
When clicking the "linkbutton" the form submits fine, but the validation never occurs. I use jQuery to submit the form when clicking the link:
$('myLink').click(function(e) {
$('myForm').submit();
});
Is it possible to someway force the validation to occur the same way as when submitting the form with a input submit button?
Webshims implements the form validation API as specified by HTML5. You can read the following bugreport and my answer to it: https://github.com/aFarkas/webshim/issues/103#issuecomment-4298458
Here is a short "workaround" for your problem:
//configure webshims to use customized bubbles
$.webshims.setOptions('forms', {
replaceValidationUI: true
});
//start polyfilling forms feature
$.webshims.polyfill('forms');
$(function(){
$('myLink').click(function(e) {
if($('myForm').checkValidity()){
$('myForm').submit();
}
});
});
But to make this clear, the best way is to use submit buttons. To get submit buttons styled, here is a simple button reset, which should work x-browser:
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input.btn-reset,
button.btn-reset {
overflow: visible;
display: inline-block;
border: none;
padding: 0;
background: transparent;
-webkit-appearance: none;
color: #000;
font-family: arial,helvetica,sans-serif;
cursor: pointer;
}