把一个div标签变成一个输入框

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

})

玉：（小事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

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

像这样的东西应该可以工作：

$(document).on('click', '.editable', function() {
    var $wrapper = $('<div class="editing"></div>'),
        $form    = $('<form action="#" class="edit-form"></form>'),
        $input   = $('<input type="text">');

    // Place the original element inside a wrapper:
    $(this).after($wrapper);
    $(this).remove().appendTo($wrapper).hide();

    // Build up the form:
    $wrapper.append($form);
    $form.append($input);
    $input.val($(this).text()).focus();
});

$(document).on('submit', '.edit-form', function(e) {
    // Don't actually submit the form:
    e.preventDefault();

    var val       = $(this).find('input').val(),
        $wrapper  = $(this).parent(),
        $original = $wrapper.children().first();

    // Use text() instead of html() to prevent unwanted effects.
    $original.text(val);
    $original.remove();
    $wrapper.after($original);
    $original.show();
    $wrapper.remove();
});

编辑：这是 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);
    }
})

Answer 4

<div contenteditable="true">
  This text can be edited by the user.
</div>

完整信息：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

把一个div标签变成一个输入框

Turn a div tag into a input box

javascript

jquery

pug