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>
Related
I have a div that the contenteditable attribute is true,
<div tabindex="1" id="editor" contenteditable="true"></div>
I have another div that acts like a button
<div>Click Me</div>
The problem am having is that after typing inside the editor box, I selected some text and when I clicked on the "click me" div the editor box looses focus and thus removing the highlighted text.
I used in js to programmatically send the focus back
document.getElementById("editor").focus()
But after this the selected text is no more selected the cusor just moves to the beginning of the editor box.
How do I get the focus to make sure the initial selected text is selected again after the click me has been clicked
One solution is setting user-select: none on your button-like div. If the browsers you care about support it, it's the simplest (but as discussed in the comments here, someone reported problems with getting it to work in Safari...)
Otherwise you'll have to save and restore the selection using JS, the text range module of rangy.js is useful for that. Check out https://stackoverflow.com/a/57546051/1026 for a usage example; in your case you'll need to save the selection onblur and restore it after processing the click on the button-like div.
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"/>
Situation 1
Why is the placeholder selectable in a deactivated input[type="text"]?
<input name="minMax2" disabled="disabled" id="minMax2" type="text"
placeholder="min. 100 / max. 200" min="100" max="200">
Situation 2
I've even have a weird situation where I can type text into the placeholder but this does happens if I click into a text field which is deactivated but because I've left another field and an attached change event did enable the datepicker.
Any idea? Did I miss something or is this a bug of Internet Explorer 10 and 11?
Looks like this is a browser behavior. As an alternative you can keep it enabled (style it appropriately as disabled if needed) and add attribute onfocus="this.blur()"
Here's your demo modified: http://jsfiddle.net/a8ezd/1/
I made a few changes to your jsfiddle from what I understand to be your problem. In your jsfiddle you included jQuery so I thought I would add to your script. I have just changed how you have declared disabled in your input and also made a change to your script so that it now removes the disabled attribute on focus.
$('#test3').prop("disabled", false).focus();
http://jsfiddle.net/a8ezd/3/
If you want to go further and make it so that the user can't even select the placeholder slightly when it's e.g. disabled then you could alter the user select in the css by adding the following with the appropriate browser prefix:
user-select:none;
Example of that here:
http://jsfiddle.net/a8ezd/4/
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.
I have had this problem for a long time and I just can't figure out how to fix it. I want to create a simple WYSYWYG editor and I have some problems.
Currently I have this:
<div id="editor" contenteditable="true"></div>
<input type="button" value="B"
onmousedown="document.execCommand('bold',false,null); return false;"/>
So, if I have some text inside my DIV, select it and click on "B" it is converted to BOLD, and remains selected, but this doesn't work on Opera and IE.
I just don't know how to make the editable DIV not only keep the focus but also the text selection.
Any idea?
Two possible options are:
Use mousedown instead of click and prevent the default browser action: http://jsfiddle.net/dA9NK/
Make the button unselectable: http://jsfiddle.net/8hpvv/