У нас есть сетка текстовых областей (которые автоматически изменяют размер содержимого): onCLick прокручивает всю страницу вверх .... почему? - PullRequest
Новая
       5

У нас есть сетка текстовых областей (которые автоматически изменяют размер содержимого): onCLick прокручивает всю страницу вверх .... почему?

0 голосов
/ 29 октября 2019

у нас есть завершенная сетка данных строки с текстовыми областями. При щелчке по текстовой области или при обновлении данных (при вводе) данные отправляются на сервер. И размер коробки отрегулирован. Однако ...

Проблема : Когда я сначала нажимаю на любое поле текстовой области, затем в Chrome браузеры прокручиваются до самого верха. Странная вещь, сам курсор мигает в поле textarea. Я должен прокрутить весь путь обратно до текстовой области, щелкнуть его еще раз ..., чтобы фактически начать работать с ним

Вопрос : Как я могу решить эту проблему. Так что, когда я нажимаю на поле текстовой области, которое находится в режиме редактирования, и браузер не меняет SCrollview / Scrolls на верх.

См. Сетку в UX

See the image

Это наш HTML в самой сетке 

<td class="a-left preorder_note " blcg-index="10">
                    <textarea rows="2" cols="24" style="width=96%;overflow:hidden;background: transparent;border: 1px solid lightgrey;" data-id="239991" class="preorder_note_input">nalevering - komt 1/11 uit productie</textarea>

И мыесть этот JS (и Jquery) 

document.observe("dom:loaded", function() {
    $$('.preorder_note_input').each(function(e) {
        e.observe('keyup', function(event) { resizeIt(e, event); return false; });
        e.observe('change', function(event) { updateNote(e); return false; });
        resizeItInitial(e);
    });
});

function updateNote(el)
{
    var id = el.readAttribute('data-id');
    var note = el.value;
    new Ajax.Request('{$noteUrl}', {
        method: 'post',
        parameters: { 'id': id, 'note': note }
    });
    resizeItInitial(el);
}

function resizeItInitial(el) {
    var str = el.value;
    var cols = el.cols;
    if (str.length == 0) { return false; }
    var linecount = 0;
    $(str.split("\\n")).each( function(l) { 
        if (l.length != 0) { linecount += Math.ceil( l.length / cols ); }
    });
    el.rows = linecount;
};

function resizeIt(el, event) {
    enter_key = false;
    if (event && (event.keyCode == Event.KEY_RETURN  || event.which == Event.KEY_RETURN)) {
        enter_key = true;
    }
    var str = el.value;
    if (str.length == 0) { return false; }
    var cols = el.cols;
    var linecount = 0;
    $(str.split("\\n")).each( function(l) { 
        if (l.length != 0) { linecount += Math.ceil( l.length / cols ); }
    });
    if (enter_key) {
        el.rows = linecount; updateNote(el);
    } else {
        el.rows = linecount + 1;
    }
    el.scrollTop()
};
...