首页 新闻 赞助 找找看

html里多行文本框的显示

0
悬赏园豆:5 [已解决问题] 解决于 2012-11-02 15:13

我在项目里用到多行文本框显示,设定显示5行,当出现滚动条时,怎样让他  不用 手动拉滚动条,而直接显示后面的信息;以增加用户的体验.

龙尹的主页 龙尹 | 初学一级 | 园豆:132
提问于:2012-11-01 08:28
< >
分享
最佳答案
0

其实,你这样才是影响用户体现呢,看了100行,现在要看31行,怎么办?

收获园豆:3
chenping2008 | 大侠五级 |园豆:9836 | 2012-11-01 09:17

可能是我表达的不准确.我做的聊天工具,我想做成像QQ一样 当出现滚动条时  不想让他从第一次开始 拉滚动条才能看到最后一行, 想直接显示最后的一条 ;我做成了这样 想看的话 还有啦滚动条.想做成这样的

龙尹 | 园豆:132 (初学一级) | 2012-11-01 09:37

@longyin: 那你每次有消息来的时候,都让textbox的滚动条滚动到底。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.js"></script>
        
    </head>
    <body>
        <div>
            <textarea rows="5" cols="30" id="chatText">1111111111111111111111111111111111111111111111111111111111111111111
            111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            </textarea>
        <div>
    </body>
    <script type="text/javascript">
        window.setTimeout("showChatContent()",2000);
        function showChatContent()
        {
            var text = document.getElementById("chatText");
            text.value+="\n测试数据"+new Date();
            window.setTimeout("showChatContent()",2000);
            $(text).scrollTop($(text).height()+$(text).scrollTop());
        }
    </script>
</html>

ff,chrome,ie9下测试通过

chenping2008 | 园豆:9836 (大侠五级) | 2012-11-01 09:55
其他回答(1)
0

自动滚动? 那用户要是没看到那 结果就滚动开了不是很蛋疼

如果不拉滚动条 那就放个按钮把,点一下翻一页 好多网站都这么干的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            font: normal 12px/17px Arial;
        }
        .msg
        {
            width: 300px;
            margin: 100px;
        }
        .msg_caption
        {
            width: 100%;
            overflow: hidden;
            margin-bottom: 1px;
        }
        .msg_caption span
        {
            display: block;
            float: left;
            margin: 0 2px;
            padding: 4px 10px;
            background: #898989;
            cursor: pointer;
            color: white;
        }
        .msg textarea
        {
            width: 300px;
            height: 80px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="../scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var $comment = $('#comment');              //获取评论框
            $('.bigger').click(function () {
                if (!$comment.is(":animated")) {            //判断是否处于动画
                    if ($comment.height() < 500) {
                        $comment.animate({ height: "+=50" }, 400);     //重新设置高度,在原有的基础上加50(如果直接.height("height-50")就没动画效果了)
                    }
                }
            })
            $('.smaller').click(function () {
                if (!$comment.is(":animated")) {
                    if ($comment.height() > 50) {
                        $comment.animate({ height: "-=50" }, 400);     //重新设置高度,在原有的基础上减50
                    }
                }
            });

            $('.up').click(function () { //向上按钮绑定单击事件
                if (!$comment.is(":animated")) {//判断是否处于动画
                    $comment.animate({ scrollTop: "-=50" }, 400);
                }
            })
            $('.down').click(function () {//向下按钮绑定单击事件
                if (!$comment.is(":animated")) {
                    $comment.animate({ scrollTop: "+=50" }, 400);
                }
            });
        });
    </script>
</head>
<body>
    <form action="" method="post">
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger">放大</span> <span class="smaller">缩小</span><span class="up">向上</span>
            <span class="down">向下</span>
        </div>
        <div>
            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
        </div>
    </div>
    </form>
</body>
</html>
收获园豆:2
oppoic | 园豆:770 (小虾三级) | 2012-11-01 08:35

可能是我表达的不准确.我做的聊天工具,我想做成像QQ一样 当出现滚动条时  不想让他从第一次开始 拉滚动条才能看到最后一行, 想直接显示最后的一条 ;我做成了这样 想看的话 还有啦滚动条.想做成这样的

支持(0) 反对(0) 龙尹 | 园豆:132 (初学一级) | 2012-11-01 09:37

@longyin: <body onload=window.scrollTo(0,document.body.scrollHeight)>

支持(0) 反对(0) oppoic | 园豆:770 (小虾三级) | 2012-11-01 09:54
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册