Robust Way of Selecting All Text in Textbox
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 G开发者_如何学Pythonoogle 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.
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>
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>
<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>
加载中,请稍侯......
精彩评论