4

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.

Improve this question

3 Answers 3

Reset to default
7

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This was working better but still was reverting back the selection on a second click, if it wasn't a quick double click.
@Emil: Actually, I think this is better than your solution, and I was careful to implement it exactly as I have: I think that preventing the user from changing the selection at all is confusing and over-prescriptive. Users expect to be able to select and copy what they like from web pages.
Tim, the whole point of it was to restrict this ability because sometimes they are copying things that they shouldn't modify like saying tracking code for a webpage. And if they accidentally modify the code or don't select all of it, it wont' function.
I can see your point, although obviously there's nothing stopping the user pasting the content into a text editor and modifying it. It's largely a matter of taste: I prefer to change expected behaviour of familiar control as little as possible.
4

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>
Improve this answer

Comments

0 
<html> <body> <script> function getElement(elemname) { if (document.getElementById) return document.getElementById(elemname); else if (document.all) return document.all[elemname]; return 0; } function lockingSelect() { ta = getElement("mytext"); ta.select(); ta.readonly = true; } </script> <textarea id = "mytext"></textarea> <br> <input type=button onclick="lockingSelect();" value="lock"/> </body> </html>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.