Question

我希望能够在.editable div中使用h2，它应该变成一个输入框。然后你可以编辑它，它会在你点击它或按回车时更新输入。这就是我所拥有的，我被困住了：

jQuery的：

$('.editable').on('click', function() {
  var h3 = $(this)
  var input = $('<input>').val(h3.text())

  h3.after(input)
  h3.hide()

  input.on('blur', function(){

  })
  //blur
  //keyup code 13 -- code 27 reset

})

jade :(小小的html）

  div.edit-menu-page
    div.title
      h2 Edit Menu
    div.menu-wrap
      div.menu-category
        div.menu-title
          div.editable
            h3 Meat
        div.menu-items
          div.menu-row
            span.item-description New York Striploin
            div.control-items
              span.item-price 10$
              span.delete X

Answer 1

基本上你想要做的是在原始元素旁边放置一个表单元素，然后在完成后，将form元素替换为原始元素。

这样的事情应该有效：

.upl

修改：这里是JSFiddle：http://jsfiddle.net/c0fb11qw/1/

Answer 2

以下是给您的快速答案，http://codepen.io/someyoungideas/pen/mJWLXE。看起来Jade在输入的工作方式上与jQuery不太合适，因为它在输入中增加了一些间距。

$('.editable').on('click', function() {
  var h3 = $(this)
  var input = $('<input>').val(h3.text())

  h3.after(input)
  h3.hide()

  input.on('blur', function(){
      h3.text(input.val());
      h3.show();
      input.hide();
  })
  //blur
  //keyup code 13 -- code 27 reset

})

Answer 3

以下是您的需求：

工作JsFiddler：https://jsfiddle.net/t0hjxxgy/

HTML

<div class="editable">
    <h3>Edit me</h3>
</div>

JS

$('.editable').on('click', function() {
    var $editable = $(this);
    if($editable.data("editing")) {
       return;
    }

    $editable.data("editing", true);
  var h3 = $("h3", this);
  var input = $('<input />').val(h3.text())

  h3.after(input);
  h3.hide();

  input.on('blur', function(){
      save();
  })
  input.on('keyup', function(e){
      if (e.keyCode == '13') {
          save();
      }
      if (e.keyCode == '27') {
          reset();
      }
  })

  function save() {
      h3.text(input.val());
      input.remove();
      h3.show();
      $editable.data("editing", false);
  }

    function reset () {
        input.remove();
      h3.show();
      $editable.data("editing", false);
    }
})

将div标签转换为输入框

3 个答案: