虚拟键盘和加载缓慢的 jQuery答案

【问题标题】：The Virtual keyboard and the slow loading jQuery虚拟键盘和加载缓慢的 jQuery
【发布时间】：2023-03-20 10:13:01
【问题描述】：

我尝试使用 jQuery 在我的代码中添加一个虚拟键盘，实际上我有几个文本字段，我在这个键盘上添加了每个字段。我的问题是当我加载页面时需要很多次（~ 10 秒）才能显示。

这是我的Demo。

代码：

var table = document.getElementById("Table-1");
var rowCount = table.rows.length;

for(var i=0;i<150;i++) {   
row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
cell1.name = "animate";
cell1.id = i ;
var values = document.createElement("input");                
values.type = "text" ;
cell1.appendChild(values);
rowCount++;            
}

$('input[type=text]').keyboard({
  layout: "qwerty"
});

【问题讨论】：

因为它是通过 for 循环附加 150 个元素。
使用浏览器的分析器/开发工具自己找出速度慢的原因。
重复使用单个键盘，不要创建 150 个，这是延迟而不是微不足道的循环。
是的，ALex，这就是问题所在，我尝试使用一个键盘但我不能。

标签： javascript jquery jquery-ui keyboard

【解决方案1】：

我的问题的第一个解决方案；我只在单击文本框时才调用键盘。

Demo.

但是还是有点慢……

代码：

var table = document.getElementById("Table-1");
var rowCount = table.rows.length;

for(var i=0;i<150;i++) {   
row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
cell1.name = "animate";
cell1.id = i ;
var values = document.createElement("input");                
values.type = "text" ;
cell1.appendChild(values);
rowCount++;    

$('#'+i).click(function() {
         $('input[type=text]').keyboard({
      layout: "qwerty"
   });
});

}

【讨论】：