Блог

Желательной функцией, например, в IRC-чат-клиенте является то, что даже когда вы наполовину набираете сообщение, если вы открываете страницу, вы можете просматривать предыдущие страницы журнала сообщений — эта функция присутствует, например, в mIRC, но не в Mibbit, предполагая, что это сложно сделать в HTML.

Каков наилучший способ в HTML и Javascript преобразовать клавишу page up в текстовой области в подкачку журнала сообщений?

Попробуйте этот код (однако он использует 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>
  

Это зависит от вашего дизайна и того, как вы расположили свои элементы…

Лично я бы использовал переполненный div с включенной только вертикальной прокруткой (overflow-y: scroll), к дочернему div внутри которого добавлялись бы данные «чатов».

Затем вы можете использовать свойство javascript .scrollTop, используя положительные и отрицательные числа, для отслеживания и прокрутки при нажатии кнопки страница вверх / страница вниз.

РЕДАКТИРОВАТЬ Я только что понял, поиграв с этим в fiddle … что когда вы просматриваете страницу вверх / вниз в переполненном div, она автоматически прокручивается без какой-либо дополнительной помощи.

Однако количество пикселей невелико, поэтому вы можете захотеть добавить onkeypress даже в текст вашего документа, чтобы немного подтолкнуть его.

 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