Javascript Jquery在div中动态写入

我正在尝试使用jquery和php创建一个数独游戏。我已经完成了所有的游戏逻辑，现在正在使用它的用户端。因此，我需要做的是能够点击一个空单元格，这将是一个div，这将使该div成为活动div。然后使用键盘上的数字输入用户想要的数字。如果他们愿意，他们还必须能够删除条目

有什么想法吗？我以前使用过jquery，但不知道从哪里开始。谢谢

Nick

“编辑就地插件，允许您通过单击来编辑xhtml元素。支持文本、文本区域和选择的输入类型。”

这将是一个非常好的起点，但它使用表单元素，这可能不是您想要的。可能你得自己写点东西

您可以为onclick附加事件处理程序—高亮显示该方块，然后向该方块写入数字键。我不认为有什么东西能帮你做到这一点

看起来其他人已经这样做了-看看他们的做法并从中学习：

编辑就地插件，允许您通过单击来编辑xhtml元素。支持文本、文本区域和选择的输入类型

这将是一个非常好的起点，但它使用表单元素，这可能不是您想要的。可能你得自己写点东西

您可以为onclick附加事件处理程序—高亮显示该方块，然后向该方块写入数字键。我不认为有什么东西能帮你做到这一点

看起来其他人已经这样做了-看看他们的做法并从中学习：

---

单击div时，在div内创建一个输入元素

写入值并按enter键/单击ok后，input元素的值将替换div中的值

---

或者如果你考虑一个中心方法，你只能有一个输入元素，只有缓存活跃的div，你想要替换的内容。

当div被点击

时，在div中创建一个<强>输入<强>元素。 写入值并按enter键/单击ok后，input元素的值将替换div中的值

---

或者如果你考虑一个中心方法，你只能有一个输入元素，只有缓存活跃的div，你想要替换的内容。

我不一定主张使用插件来实现这种类型的功能，你可以用基本的jQuery来做。假设你有这样一个结构：

<div>7</div>
<div></div>
<div></div>
...

7
...

您可以执行以下操作：

$("div").click(function(i, div) {
  if ($(div).find("input") {
    // already editing an element, bail out
    return;
  }

  var number = $(div).text();
  $(div).empty.append($("<input>"));
  var input = $(div).find("input");

  if (number) { // prefil number back to the input
    input.attr("value", number);
  }

  input.keyup(function(e) {
    if (e.keyCode == 13) { // enter pressed
      var value = parseInt($(this).value(), 10);
      if (value) {
        $(this).parent().empty().text(value);
      } else {
        // sorry mate, display error message or something
      }
    }
  });
});

$（“div”）。单击（函数（i，div）{
如果（$（div.find）（“输入”）{
//已经在编辑一个元素，请退出
返回；
}
变量编号=$（div.text（）；
$（div.empty.append（$（“”））；
变量输入=$（div）.find（“输入”）；
if（number）{//prefil number返回到输入
输入.attr（“值”，数字）；
}
输入键控（功能（e）{
如果（e.keyCode==13）{//按enter键
var value=parseInt（$（this）.value（），10）；
如果（值）{
$（this）.parent（）.empty（）.text（值）；
}否则{
//抱歉，伙计，显示错误消息或其他东西
}
}
});
});

该代码所做的是，单击div时，它会将其内容替换为一个输入，该输入由前面的数字预先填充，当用户按enter键时，它会检查输入并再次将输入替换为文本

---

这是我一笔勾销的想法，很抱歉出现语法错误，意思应该很清楚。

我不一定主张使用插件实现这类功能，你可以使用基本的jquery。假设你有这样的结构：

<div>7</div>
<div></div>
<div></div>
...

7
...

您可以执行以下操作：

$("div").click(function(i, div) {
  if ($(div).find("input") {
    // already editing an element, bail out
    return;
  }

  var number = $(div).text();
  $(div).empty.append($("<input>"));
  var input = $(div).find("input");

  if (number) { // prefil number back to the input
    input.attr("value", number);
  }

  input.keyup(function(e) {
    if (e.keyCode == 13) { // enter pressed
      var value = parseInt($(this).value(), 10);
      if (value) {
        $(this).parent().empty().text(value);
      } else {
        // sorry mate, display error message or something
      }
    }
  });
});

$（“div”）。单击（函数（i，div）{
如果（$（div.find）（“输入”）{
//已经在编辑一个元素，请退出
返回；
}
变量编号=$（div.text（）；
$（div.empty.append（$（“”））；
变量输入=$（div）.find（“输入”）；
if（number）{//prefil number返回到输入
输入.attr（“值”，数字）；
}
输入键控（功能（e）{
如果（e.keyCode==13）{//按enter键
var value=parseInt（$（this）.value（），10）；
如果（值）{
$（this）.parent（）.empty（）.text（值）；
}否则{
//抱歉，伙计，显示错误消息或其他东西
}
}
});
});

该代码所做的是，单击div时，它会将其内容替换为一个输入，该输入由前面的数字预先填充，当用户按enter键时，它会检查输入并再次将输入替换为文本

---

这是我一笔勾销的想法，很抱歉出现语法错误，意思应该很清楚。

好的，这看起来很有希望，我今天要尝试一下，会让你知道的。谢谢你的帮助。好的，这看起来很有希望，我今天要尝试一下，会让你知道的。谢谢你的帮助。