Geek Answers Handbook

How to highlight text input field by clicking it in Safari?

I would like the value of the input text field to be highlighted when it gains focus, either by clicking on it or by clicking on it.

<html> <body> <script> function focusTest(el) { el.select(); } </script> <input type="text" value="one" OnFocus="focusTest(this); return false;" /> <br/> <input type="text" value="two" OnFocus="focusTest(this); return false;" /> </body> </html>

When you click on one of the input fields in Firefox or IE, this field is highlighted. However, this does not work in Safari. (NOTE: it works when tabbing between fields.)

+4
source share
2 answers

I noticed that Safari actually selects the text and then quickly deletes the selection.

So, I tried this quick workaround that works in all browsers:

 function focusTest(el) { setTimeout (function () {el.select();} , 50 ); }

Edit:
Further testing reveals that the OnMouseUp event clears the selection, so just add

 onMouseUp="return false;"

for the input element to work as it should.

+7
source

Not sure about the specific solution for Safari, but an alternative would be to wrap the input element in a div and set its border properties via CSS. Then change the color of the frame, etc., When focused and out of focus.

0
source

More articles:


All Articles