Text area and page up

A desirab开发者_如何学Pythonle feature in e.g. an IRC chat client is that even when you're halfway through typing a message, if you page up, you can view previous pages of the message log - this feature is present in e.g. mIRC but not Mibbit, suggesting it's tricky to do in HTML.

What is the best way, in HTML and Javascript, to translate the page up key in a text area, into paging up a message log?

Try this code (it's using jQuery however)

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

It depends on your design and how you have your items arranged...

Personally I would use an overflowing div with only the vertical scrolling turned on (overflow-y: scroll) that would have data "chats" appended to a child div inside of it.

Then you can use the javascript .scrollTop property using positive and negative numbers to catch and scroll when the page up/page down is pressed.

EDIT I just realized from playing with it in fiddle... that when you page up/down in an overflowing div it will automatically scroll w/o any additional help.

The number of pixels is small though so you may want to add an onkeypress even to your document body to give it a little nudge.

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;
        }
    }
});

Check this example on jsfiddle