控制textarea滚动技巧

最新推荐文章于 2024-07-15 03:00:38 发布

原创最新推荐文章于 2024-07-15 03:00:38 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #input #scroll #function #html #ie

JavaScript 同时被 2 个专栏收录

20 篇文章

订阅专栏

web

7 篇文章

订阅专栏

本文提供了一种在Internet Explorer 4及更高版本浏览器中实现文本区域自动滚动到顶部或底部的方法，并展示了如何设置文本输入光标到开始或结束位置的JavaScript函数。通过几个简单的按钮操作，可以轻松地向文本区域添加新行并自动调整滚动位置或光标位置。

<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>