I'm having a problem in Firefox where if you click the <input type="text"> in Firefox, the focus is diverted immediately to the Radio button sibling.
The behavior works as intended in Chrome. Do I need extra Javascript to fix this up?
Here's the JsFiddle
Seems like Firefox is actually doing the correct thing according to the W3C:
If the for attribute is not specified, but the label element has a
labelable element descendant, then the first such descendant in tree
order is the label element's labeled control.
Your label is wrapping two input elements, so when you click in the text box, the radio (the first such descendant in tree order) receives focus.
Results will vary depending on how the browser has implement this rule, so to ensure cross-browser results yes, you'd need JavaScript to step in.
From MDN:
Permitted content: Phrasing content, but no descendant label elements.
No labelable elements other than the labeled control are allowed.
Basically, putting two inputs within a label is not valid markup. Change your html markup so that the label only wraps the radio input (and any text label)...
<label class="radio">
<input type="radio" name="requestfor" id="optionsRadios2" value="someoneelse" />
Behalf of
</label>
<input type="text" name="behalfof" id="behalfid"/>
...and then use javascript (or in my lazy case, jQuery) to select the radio:
$('#behalfid').click(function(){
$('#optionsRadios2').trigger('click');
});
Here's the fiddle.
Did some digging around and found this jsFiddle with a jQuery solution.
Firing trigger.click();on radio input will select it when clicking on the textbox.
Related
I have HTML label structures generated by a JQuery multiselect dropdown library as shown:
<label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label>
<label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label>
My requirement is: except the input element, whenever the user clicks on anywhere else in the
<label></label>
(including the label) area,I need to do event.preventDefault(). I have tried as
$(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){
event.preventDefault();
});
But the above handler gets triggered even when I click on the <input> within the label as well(which is obvious and I know that!)
How do I write a JQuery selector for to filter this.
The best thing would be to have the input out of the label... But:
I do not have control over this markup structure... (your comment on another answer)
You can use .stopImmediatePropagation() on the <input> elements... So the click event won't bubble up to the label.
See below... Try a click a label, then on a radio.
$(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){
console.log("Clicked on a label");
event.preventDefault(); // Don't know if that is useful...
});
$(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"] input',function(event){
console.log("Clicked on a radio input");
event.stopImmediatePropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label>
<label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label>
The first problem is your label. You generally should either have your input inside the label OR use the for attribute. Your for attributes are for different controls than the ones inside the labels. I am not sure how browsers will handle this.
If you don't want clicks on the label to trigger an input, don't associate them at all. Consider not using a label at all, use a span instead.
If there is a condition that turns on/off whether the label affects a control, you can use code to set/clear the label's for attribute.
On Chrome (and possibly other WebKit based browsers too), I have an issue where if a checkbox is wrapped inside a label and the label has the attribute contenteditable=true, Chrome fails to focus properly on the label.
<label contenteditable="true">hello <input type="checkbox" /></label>
Clicking on the text fails to focus and instead checks the checkbox.
To focus on the text, it is necessary to select some text and then click on the selection to see the cursor blinking.
To see the wanted behaviour, check on Internet Explorer 11. Clicking on the text itself selects the text, and clicking on the checkbox selects the checkbox.
Is there any fix to this (other than changing the HTML)?
Actually that is what a label is supposed to do
If you insist on doing it as a label you have to prevent the default behaviour of it and cancel the propagation on the checkbox itself:
<!-- Dirty example -->
<label contenteditable="true" onclick="event.preventDefault()">hello <input type="checkbox" onclick="event.stopPropagation();" /></label>
Like I commented before, I would not recommend this. Let the labels do what they are supposed to do and use a span instead.
This is what a label is supposed to do. They make interacting with form field easier (especially on small devices). It is for better UI accessibility.
To see the wanted behaviour, check on Internet Explorer 11. Clicking
on the text itself selects the text, and clicking on the checkbox
selects the checkbox.
You'll need to just use a <span> instead:
<span contenteditable="true">hello <input type="checkbox" /></span>
I am kind of embarrassed that I can't find a solution to this simple task.
It is easy to make a checkbox and a span-tag in the same line, which what I have done liek this:
<label class='checkbox' for='visible_1'>
<input id='visible_1' class='visible' type='checkbox'>
<span>Layer_1</span>
</label>
I set a function to the checkbox, which show/hide the layer_1 and works pretty good.
I also set a event with jQuery to the span-tag, which show some text in the website, but then I got a problem, I can't "touch" the text of span, the checkbox kinda of blocks the text, no matter where I click, as long as I click in the line, which checkbox and span are in, I can only select the checkbox.
It seems like the checkbox takes the whole line and the click event on span-tag is blocked by checkbox.
I don't know how it can be done, cause I don't want the checkbox to take a line and the span-tag another, it's even worse.
One inherent behavior of the label element is to act as a touch target for its associated field:
When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control. -- MDN Element docs
However, the default display attribute of a label element is "inline", which means they will normally appear on the same line as other "inline" elements, like inputs:
<input id='visible_1' class='visible' type='checkbox'>
<label for="visible_1">Layer_1</label>
It may be that your site has some style overrides to make label a block element, which would make sense if your normal use case is to wrap elements and their captions in a label element; it's common to want these controls on separate lines. If that's the case, then you can use CSS to restore the default behavior--something like:
.my-inline-label-section label {
display: inline;
}
I have a problem that when the background is double-clicked the first element is selected.
Check out this fiddle:
https://jsfiddle.net/cb6fjr7n/1/
<input style="text" value="lala"/>
If you double-click outside of the input the input will get selected, but it still doesn't have focus because you can't type.
I need to stop this behavior. I want no selection, no focus, no highlight or anything like that when double-clicking. And not just a cosmetic fix, I don't want the focus to move at all.
I still need to be able to input text in the input field though when the input itself is clicked upon.
Just use the css property user-select
Check out this fiddle
https://jsfiddle.net/34kuf1c1/
Just add disabled to your input !
<input disabled style="text" value="lala"/>
Usually I used label tag for pointing input tag like this
<label for='firstname'>First Name:</label>
<input type='text' id='firstname' />
Now I have this
<label for='firstname'>First Name:</label>
<label id='firstname'></label>
Since I haven't crossed anything like this before, is it possible to have label tag for a label. Will it work, when I apply Javascript because I have to update the values? or this is a valid w3c compliance?
I'm confused whether to use it or not.
It's invalid according to the W3C validator.
The for attribute of the label element must refer to a form control.
No. Label elements label (primarily) form controls (<input>, <button>, etc), not arbitrary elements.
See the HTML specification:
Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.
button, input (if the type attribute is not in the hidden state), keygen, meter, output, progress, select, textarea
As others have answered, the label element must refer to a control, such as input, so it must not refer to another label element, even syntactically. This restriction is present even in HTML5.
This means that if you read user input using elements other than controls, you can still use labels for them, but you must not use label markup for the label. Normally, text data like names is best read using input type=text. If you cannot use it, or another control, for some reason, then the approach recommended in ARIA specifications is to a semantically neutral element, normally span, and use the ARIA attribute aria-labelledby to specify the connection between a label and the span. Example:
<span id=firstnameLabel>First Name:</span>
<span role=textbox id=firstname aria-labelledby=firstnameLabel></span>
The ARIA attributes are primarily meant for assistive or otherwise accessibility-aware software. They are probably ignored by mainstream browsers.
Label for label is non-conforming. Probably HTML5 output element is what you want?
The Label "For" attribute has to point to a valid ID attribute of a "control" element, http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2 lists valid control elements as
buttons, checkboxes, radio buttons, menus, file select, hidden controls, object controls.
It might work in JS, but it would be invalid HTML