控制textarea滚动技巧

来源：互联网发布：败类-网络歌手在线试听编辑：程序博客网时间：2024/05/14 02:11

<HTML>
<HEAD>
<TITLE>
TextArea scrolling in IE4+
</TITLE>
<SCRIPT>
function scrollToTop (element) {
if (document.all)
    element.scrollTop = 0;
}
function scrollToBottom (element) {
if (document.all)
    element.scrollTop = element.scrollHeight;
}
function setCaretToStart (input) {
if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.select();
}
}
function setCaretToEnd (input) {
if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(false);
    range.select();
}
}
</SCRIPT>
<SCRIPT>
var i = 3;
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="addLine and scroll to bottom"
       ONCLICK="document.all.aTextArea.value += '/n' + i++ + ':
Kibology';
                scrollToBottom(document.all.aTextArea);"
>
<INPUT TYPE="button" VALUE="addLine and set caret to end"
       ONCLICK="document.all.aTextArea.value += '/n' + i++ + ':
Kibology';
                setCaretToEnd(document.all.aTextArea);"
>
<BR>
<INPUT TYPE="button" VALUE="scroll to top"
       ONCLICK="scrollToTop(document.all.aTextArea);"
>
<INPUT TYPE="button" VALUE="scroll to bottom"
       ONCLICK="scrollToBottom(document.all.aTextArea);"
>
<BR>
<INPUT TYPE="button" VALUE="set caret to start"
       ONCLICK="setCaretToStart(document.all.aTextArea);"
>
<INPUT TYPE="button" VALUE="set caret to end"
       ONCLICK="setCaretToEnd(document.all.aTextArea);"
>
<BR>
<TEXTAREA ID="aTextArea" ROWS="3" COLS="20" WRAP="soft">
1: Kibology
2: Kibology</TEXTAREA>
</BODY>
</HTML>