将一个div标签变成一个输入框答案

【问题标题】：Turn a div tag into a input box将一个div标签变成一个输入框
【发布时间】：2015-08-18 10:15:42
【问题描述】：

我希望能够点击 .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

【问题讨论】：

Jeremy Blalock 的回答似乎是完整且具有描述性的，尽管从头开始实现这种控制需要一些时间，特别是如果您不仅需要简单的输入字段，因此我建议使用提供的现有库内联编辑功能webrevisions.com/jquery-plugins/…

标签： javascript jquery pug

【解决方案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/

【讨论】：

如果你想让它真的很酷，你还可以将原元素的font、width等样式属性拉到输入元素中。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这是一个快速的答案，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

})

【讨论】：

【解决方案4】：

这是你需要的：

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

HTML

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

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

【讨论】：