文字区域和上一页

如何解决文字区域和上一页

| 理想的功能例如一个IRC聊天客户端是，即使您在输入消息的途中，即使您向上翻页，也可以查看消息日志的前几页-此功能例如mIRC而不是Mibbit，这表明使用HTML进行操作很棘手。 用HTML和Javascript将文本区域中的向上翻页键转换为向上翻页消息日志的最佳方法是什么？     

解决方法

尝试以下代码（但是正在使用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>

    ,这取决于您的设计以及物品的排列方式。 就我个人而言，我将使用仅打开垂直滚动（溢出-y：滚动）的溢出div，该垂直滚动将数据\“ chats \”附加到其内部的子div中。 然后，您可以使用javascript .scrollTop属性（使用正数和负数）在按上一页/下一页时捕获和滚动。 编辑我只是从玩弄小提琴中才意识到...当您在一个溢出的div中向上/向下翻页时，它将自动滚动而没有任何其他帮助。 尽管像素数很小，所以您甚至可能希望向文档主体添加一个按键，以使其略微移动。     ,

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上检查此示例