CODEWITHSUNDEEP
javascripthtmlcssfirefox
cdqqa
cdqqa

Reputation: 25

Firefox input can't scroll when text is selected

I have a input which is selected on click:

<input onClick="this.select();" type="text" name="country" value="Norwayasdasdasddddddddddddddddddddddddddddddddddddddd" readonly><br>

The problem is that, in Firefox, the first time I can scroll to the right by holding the left mouse button. Then, I can't do it for the second time. When I want to scroll to see the full value for the second time, the whole text is selected and I can't scroll anymore. I don't have this issue in Chrome.

Please help!

Thanks, Quincy

Upvotes: 1

Views: 794

Answers (2)

Mr Lister
Mr Lister

Reputation: 46589

One solution is to make the click a toggle, by remembering if the text was selected the last time you clicked. So add a variable

var selection = false;

and change the onclick handler to 

if (selection = !selection) this.select();

Then the first slick will select all the text, the next click will deselect it, etc. See JSFiddle.

Edit: an alternative method is to deselect the text on a mousedown. That would be closer to what you need.

<input onMouseDown="this.setSelectionRange(0,0)" onClick="this.select();"
type="text" name="country"
value="Norwayasdasdasddddddddddddddddddddddddddddddddddddddd" readonly>

See other JSFiddle.

Upvotes: 1

RobotMan
RobotMan

Reputation: 488

You can try to fix the problem with this workaround:

<input onmouseout="var tmp=this.value;this.value='';this.value=tmp" onClick="this.select();" type="text" name="country" value="Norwayasdasdasddddddddddddddddddddddddddddddddddddddd" readonly><br>

So, when the mouse exit from input area the text is rewritten (this hack remove the selection from the text). If you want keep the text selected when mouse exit from input area, you can use onmouseenter rather than onmouseout

Upvotes: 1

Related Questions