5

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. enter image description here

Michał Matuszek
  • 61
  • 1
  • 6
  • This is native browser behaviour and as such can not be changed. You can however fiddle around with javascript to get all the text selected when focusing on a text input. Checkout [this answer](http://stackoverflow.com/a/987376/777850) for details – giorgio Apr 09 '15 at 08:44
  • This is not related with the code. This is a behavior of the browser. Just go to website which has a input text field (i.e www.google.com) and then please type number with dot (i.e 1.00.1) in input field and then double click on the input. Please do this in 3 browsers (IE, Firefox and chrome) and you can see that Chrome has a different behavior. – Michał Matuszek Apr 09 '15 at 08:45
  • @giorgio. I supposed that this is a behavior of the browser, but for me this behavior is very useless. A lot of countries have a date format with dots, so change something with double click selection is horrible. For me behavior in Chrome should be reverse. If I have a number in text field please select my only a part between a dots. If I have a text with dots should be select whole text. – Michał Matuszek Apr 09 '15 at 08:55
  • 1
    you can custom yourself double click event to overwrite the default event. – Todd Mark Apr 09 '15 at 09:05
  • You're going through hard ways. Is it really necessary ? I think it should be possible but it's not easy at all, but your question is interesting. You just have to decide if it is really an important feature or not... but if you do it could be usefull for other people ;) have fun with it ! – Pierre Granger Apr 09 '15 at 09:11
  • @ToddMark using preventDefault() in 'dblclick' unfortunately does not prevent Chrome from selecting all characters in textbox. – Jarzyn Apr 09 '15 at 09:23

1 Answers1

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

Community
  • 1
  • 1
Pierre Granger
  • 1,993
  • 2
  • 15
  • 21