Question

我正在使用https://github.com/Mottie/Keyboard在Handsontable中输入输入。我在“选择后”之后拨打键盘＆＃39;在文本编辑器元素上，它具有类＆handsantableInput＆＃39;它出现在细胞下方。当我在页面上有单个表时，它完美地工作。但是当页面上有多个表时，结果会有所不同。以下是重现问题的步骤

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/以重现问题。我还在Handsontable Github页面上发布了Issue

单击第一个表格的单元格，键盘出现在单元格下方
单击第二个表格的单元格。结果：键盘显示在页面左上方
再次单击第二个表的同一单元格。结果：键盘出现在单元格正下方

预期行为：当用户第一次点击第二个表格的单元格时（步骤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();
}
}

当页面上有多个handontable表实例时，虚拟键盘不会出现在单元格下方

1 个答案: