Question

例如，一个理想的特征。一个IRC聊天客户端就是即使你在键入消息的一半时，如果你翻页，你可以查看消息日志的前一页 - 这个特征存在于例如mIRC但不是Mibbit，暗示用HTML做起来很棘手。

在HTML和Javascript中，将文本区域中的页面翻译密钥翻译为分页消息日志的最佳方法是什么？

Answer 1

试试这段代码（但是使用的是jQuery）

<textarea id="myText"></textarea>
<script>
    $(document).ready(function(){
    var messages = new Array();
    messages[0] = 'First message';
    messages[1] = 'Second message';
    messages[2] = 'Third message';

    var messageCounter = messages.length; 

    $('#myText').keyup(function(e){
        //Pageup
        if (e.which == 33) {
            //Get messageCounter and decrement to move up
            messageCounter--;
            if (messages[messageCounter] != undefined) {
                $('#myText').val(messages[messageCounter]);
            }
        } else if (e.which == 34) {
            //Get messageCoutner and increment to move down
            messageCounter++;
            if (messages[messageCounter] != undefined) {
                $('#myText').val(messages[messageCounter]);
            } else {
                //No more so make blank
                $('#myText').val('');
            }
        }
        //Pagedown
    });
    });
</script>

Answer 2

这取决于您的设计以及如何安排您的物品......

就个人而言，我会使用溢出的div，只打开垂直滚动（overflow-y：scroll），将数据“聊天”附加到其中的子div。

然后，您可以使用javascript .scrollTop属性，使用正数和负数来捕获并在按下页面向上/向下翻页时滚动。

编辑我刚从小提琴演奏中意识到...当你在一个溢出的div中向上/向下翻页时，它会自动滚动，无需任何其他帮助。

虽然像素数很少，但您可能想要在文档正文中添加一个onkeypress，以便稍微轻推一下。

Answer 3

var history=[];
var $chat=$('#chat');
var $area=$('#area');
var $btn=$('#btn');
var cur=-1;

$btn.click(function(){
    var msg=$area.val();
    if(msg=='')return;
    history.push(msg);
    $chat.append('<div>'+msg+'</div>');
    $area.val('');
});

$area.keyup(function(event){
    // up
    if(event.keyCode == '38'){
        var msg=$area.val();
        // nothing typed
        if(msg==''){
            cur=history.length-1;
            if(cur<0)return;// no history
            $area.val(history[cur]);
            return;
        }
        // something shown!
        if(msg==history[cur]){
            if(cur==0)return;// reached bottom
            cur--;
            $area.val(history[cur]);
            return;
        }
    }
    // down
    if(event.keyCode == '40'){
        var msg=$area.val();
        if(msg==history[cur]){
            if(cur==history.length-1)return;// reached top
            cur++;
            $area.val(history[cur]);
            return;
        }
    }
});

在jsfiddle

上查看此示例

文本区域和页面向上

3 个答案: