Виртуальная клавиатура не отображается под ячейкой, если имеется несколько экземпляров рукописной таблицы на стр.

Question

Я использую https://github.com/Mottie/Keyboard для ввода входов в Handsontable. Я вызываю клавиатуру на «afterSelectionEnd» на элементе текстового редактора, который имеет класс «handsontableInput» и отображается чуть ниже ячейки. Когда у меня есть одна таблица на странице, она отлично работает. Но когда на странице несколько таблиц, результат отличается. Вот шаги, чтобы воспроизвести проблему

function keyboard() 
{ 
$('.handsontableInput').keyboard 
({ 
layout: 'custom', 
customLayout: { 
'default' : [ 
'a s d f g h j k', 
'a s d f g h j k', 
'a s d f g h j k' 
], 
}, 
}) 
.getkeyboard().reveal(); 
} 
$(document).ready(function() { 
    function getData() { 
     return [ 
     ["", "Kia", "Nissan", "Toyota", "Honda"], ["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13]]; 
    }  
    var container1 = document.getElementById('example1'); 
    var container2 = document.getElementById('example2'); 
    var hot1 = Handsontable(container1, { 
     data: getData(), 
     startRows: 5, 
     startCols: 5, 
     minRows: 5, 
     minCols: 5, 
     maxRows: 10, 
     maxCols: 10, 
     rowHeaders: true, 
     colHeaders: true, 
     minSpareRows: 1, 
     contextMenu: true, 
     comments: true, 
     cell: [{ 
      row: 1, 
      col: 1, 
      comment: "Test comment" 
     }, { 
      row: 2, 
      col: 2, 
      comment: "Sample" 
     }], 
    afterSelectionEnd : function (instance,col,row,td){ 
    this.getActiveEditor().beginEditing(); 
    keyboard(); 
}, 
    }); 
    var hot2 = Handsontable(container2, { 
     data: getData(), 
     startRows: 5, 
     startCols: 5, 
     minRows: 5, 
     minCols: 5, 
     maxRows: 10, 
     maxCols: 10, 
     rowHeaders: true, 
     colHeaders: true, 
     minSpareRows: 1, 
     contextMenu: true, 
     comments: true, 
     cell: [{ 
      row: 1, 
      col: 1, 
      comment: "Test comment" 
     }, { 
      row: 2, 
      col: 2, 
      comment: "Sample" 
     }],    
    afterSelectionEnd : function (instance,col,row,td){ 
    this.getActiveEditor().beginEditing(); 
    keyboard(); 
}, 
    }); 
}) 

Пожалуйста, обратитесь jsfiddle http://jsfiddle.net/yd0fucct/5/ воспроизвести проблему. я также отправил Issue на Handsontable Github странице

• Нажмите на ячейку первой таблицы, появится клавиатура ниже ячейки, которая является хорошим
• Нажмите на ячейку второй таблицы. Результат: клавиатура появляется в левом верхнем углу страницы
• Снова щелкните в той же ячейке второй таблицы. Результат: Клавиатура появляется чуть ниже ячейки, которая хороша

Ожидаемое поведение: Когда пользователь сначала нажимает на ячейку второй таблицы (шаг 2), она должна появляться сразу же под ней. Пожалуйста, обратитесь к этой проблеме.

Когда мы сначала нажимаем на вторую таблицу, проблема не возникает. Это происходит только при первом щелчке по приведенной выше таблице.

Answer 1

См this GitHub вопрос для решения

var lastInput; 

function keyboard() { 
var kb, 
$input = $(':focus'); 
if ($input.length) { 
lastInput = $input; 
// close the last keyboard 
kb = lastInput.getkeyboard(); 
if (kb) { 
    kb.close(true); 
} 
if (!$input.hasClass('.ui-keyboard-input')) { 
    $input.keyboard({ 
    usePreview: false, 
    initialFocus: false, 
    layout: 'num' 
    }); 
} 
$input.getkeyboard().reveal(); 
} 
}