Entry
How can I set the caret to the end of a text field/text area?
How can I set the caret to the beginning of a text field/text area?
Feb 26th, 2005 03:44
Martin Honnen, http://www.xulplanet.com/references/objref/HTMLTextAreaElement.html#method_setSelectionRange http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/obj_textrange.asp
MSIE (at least on Windows), Mozilla 1.0 and later for <input> elements,
Mozilla 1.3 and later for <textarea> controls, and Opera 8.00 beta 2
allow that: IE using its text range API, Mozilla using its
setSelectionRange method exposed on text controls, Opera 8.00
implementing the APIs earlier introduced by the other two browsers.
Here is the code, tested with IE 6, Mozilla 1.7.3, Netscape 7.2, and
Opera 8.00 beta 2 but as said it should work with IE 5/5.5 and with
Mozilla browsers as indicated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Caret positioning for text controls in IE, Mozilla, and Opera</title>
<script type="text/javascript">
function setCaretToEnd (control) {
if (control.createTextRange) {
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange) {
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
}
function setCaretToStart (control) {
if (control.createTextRange) {
var range = control.createTextRange();
range.collapse(true);
range.select();
}
else if (control.setSelectionRange) {
control.focus();
control.setSelectionRange(0, 0);
}
}
</script>
</head>
<body>
<h1>Caret positioning for text controls in IE, Mozilla, and Opera</h1>
<form action="" onsubmit="return false;">
<div>
<input type="text" name="inputName" value="Kibology">
<input type="button" value="move caret to end"
onclick="setCaretToEnd(this.form.elements.inputName);">
<input type="button" value="move caret to start"
onclick="setCaretToStart(this.form.elements.inputName);">
</div>
<div>
<input type="password" name="passwordName" value="Kibology">
<input type="button" value="move caret to end"
onclick="setCaretToEnd(this.form.elements.passwordName);">
<input type="button" value="move caret to start"
onclick="setCaretToStart(this.form.elements.passwordName);">
</div>
<div>
<textarea name="textareaName" rows="5" cols="80">
Kibology for all.
All for Kibology.
Kibology for all.
</textarea>
<br>
<input type="button" value="move caret to end"
onclick="setCaretToEnd(this.form.elements.textareaName);">
<input type="button" value="move caret to start"
onclick="setCaretToStart(this.form.elements.textareaName);">
</div>
</form>
</body>
</html>
