PDA

View Full Version : FireFox 2/3 setSelectionRange() Problem



NorthernGoshawk
07-17-2008, 07:31 PM
Hello all,

I'm running into unexpected behavior with the setSelectionRange() method. I have Searched The Fabulous Web for a while but I have not been able to come up with anything helpful. I have had others reproduce this issue in their installations of FireFox.

I have a textarea with some text that I would like to select for the user and, for FireFox, I am using the setSelectionRange() method to accomplish this. This seems to work fine, until the user clicks inside of the textarea. Then the setSelectionRange() method seems to fail, without producing an error.

I have provided a short snippet of HTML that reproduces this problem.

1. Click on the 'Click me' link. The character range 5-15 should be selected.
2. Click on the 'Click me 2' link. The character range 0-10 should be selected.
3. Click on the text area. The selection should disappear (expected behavior).
4. Click on the 'Click me' link again. The character range 5-15 SHOULD be selected, but it is not.
5. Click on the 'Click me 2' link again. The character range 0-10 SHOULD be selected, but it is not.

What is it that I am missing? Any help would be greatly appreciated.


<html>
<head>
<title>Test Page</title>
</head>
<body>
<form name="aForm" id="aForm" action="" method="POST">
<textarea name="aTextArea" id="aTextArea">This is my text area.</textarea>
</form>
<a href="#" onclick="document.getElementById('aTextArea').setSelectionRange(5,15); return false;">Click me.</a>
<br />
<a href="#" onclick="document.getElementById('aTextArea').setSelectionRange(0,10); return false;">Click me 2.</a>
</body>
</html>

jscheuer1
07-18-2008, 06:09 AM
I see what you mean. This works here in FF 3:


<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function setrange(id, a, b){
var el = document.getElementById(id);
el.focus();
el.setSelectionRange(a, b);
}
</script>
</head>
<body>
<form name="aForm" id="aForm" action="" method="POST">
<textarea name="aTextArea" id="aTextArea">This is my text area.</textarea>
</form>
<a href="#" onclick="setrange('aTextArea', 5, 15); return false;">Click me.</a>
<br />
<a href="#" onclick="setrange('aTextArea', 0 ,10); return false;">Click me 2.</a>
</body>
</html>