Double click text selection in input fields in Chrome

Question

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.

Answer 1

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