We Keep Coding

How to get the selected text focus again after contenteditable lost focus and gained it back programmartically

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.

onpaste / paste event not firing for table on first few attempts

Google Chrome specific - this is an internal-use app that does not require cross-browser compatibility
See http://jsfiddle.net/spetnik/vpcyt4yv/
I have a table into which I am attempting to allow pasting of data. I made the individual cells selectable as such:
<td tabindex="0">
I originally tried adding the onpaste event to the TD elements themselves, but this did not work at all. So instead, I added the event to the table element and just check to make sure that the focused element is a TD and then paste the data to that element:
document.getElementById("tblData").onpaste = function(evt){
if(document.querySelector(":focus").tagName.toLowerCase() != "td"){
return;
}
document.querySelector(":focus").innerText = evt.clipboardData.getData("text/plain");
};
While this does essentially work, the event usually does not fire on the first attempt. It seems that I need to either a) click around in the table a random number of times (each time is different) or b) change focus to another window and then back again before the event fires. In the jsFiddle I have added a console.log() call to the very beginning of the event so that I can see exactly when the event fires in the debug pane.
See the above jsFiddle or just the result at https://jsfiddle.net/spetnik/vpcyt4yv/embedded/result/

Wow. The culprit seems to be the -webkit-user-select/user-select CSS! I discovered this when I noticed that pasting would be allowed only after initially clicking and dragging the mouse over a cell (which explains the random clicking - only after I clicked until my mouse moved mid-click did it work). I removed this CSS and now it works. Of course, now I need to find a workaround to prevent selecting, but at least I'm no longer stumped.
Edit: It seems that on a normal element (e.g. a DIV with the onpaste set to the element itself) onpaste does not work at all when -webkit-user-select is set to none. I submitted a bug report here
EDIT 2: I have managed to find the following workaround: If I programmatically select the contents of the cell before Ctrl-V is pressed, then it will work, even with -webkit-user-select set to none. I accomplished this by adding the following event handler (jQuery shown here) to the TD (this still does not work in a standalone DIV with -webkit-user-select set to none):
$(elem).click(function(evt){
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
})

Double click text selection in input fields in Chrome

I have input field in HTML with number text which has a dots i.e "1.00.1". If I double click on this field in IE or firefox, browser select only a part of the text (between the dots), but in Chrome double click select the whole text in this field.
What is the best way to change this behavior in Chrome? If I have only text (ie "test.test") in input fields, double click with selection in Chrome works the same like IE and Firefox.

It should be possible but complex. First you have to detect cursor position on click (first click of the dblclick), store it and use it in dblclick (second click) :
Get cursor position (in characters) within a text Input field
Here your problem will be to not trigger the click on dblclick, because it will change the cursor position wich is wrong (reset cursor pos to 0). I tried but this is gonna be hard to manage :
http://jsfiddle.net/n2rzyxvg/3/
jQuery(document).on('click',"#input",function(){
var clickpos = jQuery(this).getCursorPosition() ;
jQuery(this).data('clickpos',clickpos) ;
console.log("Click ! " + clickpos) ;
});
jQuery(document).on('dblclick',"#input",function(){
console.log("DblClick ! " + jQuery(this).data('clickpos')) ;
});
There is a way but it's not perfert (does not respect the OS behavior of dblclick, it set a custom timeout to imitate dblclick) :
Jquery bind double click and single click separately
If you can manage to get the cursor position on dblclick, you will then just have to find your first and last character position where you want jQuery to start/stop your selection :
Selecting Part of String inside an Input Box with jQuery
I can't help you much more but the difficult part here is the dblclick triggering click, the second part should be easier.
Hope this can help
HF

Stop clicking on text from cancelling selection

I'm trying to make a simple rich text editor, and I'm getting stuck at the stupidest thing. For the bold buttons, instead of having a button, I'm trying to make it so that, near the top of the screen, there are several spans, and each one has a thing you can do to the text, such as bold, italic, underline, etc, and when you click on one I want it to toggle if the selected text in the contenteditable div is bold, italic, or underline. Basically, instead of buttons, I want to simply click on a span to toggle those things.
So I put a whole bunch of spans in the right place and put event handlers on them that did the appropriate execCommand. However, when the user clicks on the spans, it cancels the selection in the contenteditable div, so that the execCommand doesn't do anything. I tried setting the css user-select to none (I also used prefixes), cancelling the selectstart event, cancelling the click event, but it still cancels the selection when I click on it
You can see the jsfiddle here
I don't want to use a button instead of a span or anything. I don't want to do it in a hacky way (such as copying the selection on input, and then recreating the selection after the click) either

There's a few ways to achieve this. You can prevent the default mousedown behaviour like below:
document.getElementById('bold').addEventListener('mousedown', function (e) {
e.preventDefault();
});
FIDDLE
You can also just use the semantically correct elements such as <button> rather than <span>. If you do not like the way <button> element looks by default just re-style it.
FIDDLE

Disabled cell's button click event fire

I have a table in which there is a button in one cell. Now when I am disabling that cell, the cell gets disabled but on clicking upon that cell, button click event is happening. So instead of disabling the cell, I disabled the button. Now everything working fine, but I wanted to know that why on disabling the cell, button click event was getting fired?
my code snippet is like below:
To disable cell-(previous approach) ---
grid.rows[i].cells[1].disabled=true;
To disable button:(new approach)--
grid.rows[i].cells[1].firstChild.disabled=true;

From the html4 spec:
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.
Looking at the html4 spec for td, there is nothing saying disabled is valid.
So that means setting disabled on the table's cell does nothing. You need to set individually on the form elements inside of the cell.
What you are doing now is randomly setting some property on the cell that means nothing to it. It is the same thing as setting grid.rows[i].cells[1].foobar=true;. It means nothing, but the cell has it attached to it.

I think it maybe happening because when u disable the cell then the button element does not get disabled. It still remains enabled, unlike the cell.