Robust Way of Selecting All Text in Textbox

Question

I'm trying to have the content of the an HTML textbox be selected fully onFocus.

I know the simple solution of putting a onfocus="this.select()" on the component but this is not a good solution because if a user double clicks into the area the selection is lost and in browsers like chrome it is rarely working like it should and just reverts into input form.

I have searched on Google for a little while and can't find a good solution, most suggestions are of this simple solution.

What I would like it is that the selection inside the textbox not change once selected and if possible the user should not be able to edit the content of the textbox, for example if you have used AdSense when you grab code from AdSense the selection never changes and your unable to alter the code in the textbox.

Any solutions would be appreciated.

Answer 1

I altered the code by Tim Down to get it work the way it should, here is the final code for other people ( make sure to capitalize O in readOnly ).

<script type="text/javascript">
    function selectAll(id) {
        var textBox = document.getElementById(id);
        textBox.select();
        textBox.readOnly = true;
        textBox.onmouseup = function() {
            textBox.select();
            return false;
        };
        textBox.onmousedown = function() {
            textBox.select();
            return false;
        };
    };
</script>

Answer 2

Sounds like you want the the text box to be read-only. However, I would say that preventing the user from changing the selection is a bad idea: it's confusing and inconvenient for the user, so I haven't implemented that. The following will select the input's content when focussed in all browsers, and the input is read-only:

<input type="text" id="foo" readonly value="Some text">

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>