Jquery write on the fly in a div

I am trying to create a sudoku game using jquery and php. I have all the game logic done am now working user end of it. So what I need to do is be able to click on an empty cell which will be a div which will make that div the active one. Then use the numbers on the key board to enter the开发者_JAVA百科 number the user would like. They would also have to be able to delete the entry if they wanted.

Any ideas? I have used jquery before but have no clue where to start with this. Thanks

Nick

---

I wouldn't necessarily advocate using plugins for this type of functionality, you can do with basic jquery. Say you have a structure like this:

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

You could do the following:

$("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
      }
    }
  });
});

What the code does is that on click to a div, it replaces its contents with an input, pre-filled by number previously in there and when the user presses enter it checks the input and replaces the input by text again.

I'm writing this off the top of my head, so sorry for any syntax errors, the meaning should be clear.

---

"Edit in place plugin which allows you to edit xhtml elements by clicking on them. Support for input types of text, textarea and select. "

http://plugins.jquery.com/project/jeditable

Would be a very good place to start but it uses form elements and that may not be what you want. Chances are you'll have to write something yourself.

You could attach event handlers for onclick - highlight that square and then write a numeric key presses to that square. I don't think something exists that will do this for you.

Looks like someone else has done it already - look at and learn from their way of doing it:

http://yoan.dosimple.ch/blog/2008/04/30/sudoku.html

---

Create an input element inside the div, when the div is clicked

After writing the value and pressing enter / clicking ok, the value of input element will replace what was inside the div.

Or if you consider a centric approach, you can have only one input element and only cache active div, which contents you want to replace.