如何单击并内联编辑元素

Question

我不确定它叫什么，但我希望能够点击例如一个包含数字的

div

，然后它会变成一个输入文本字段，值为我点击的数字。

然后我想编辑号码，然后单击关闭（

onblur

事件），它将从显示新编辑的号码的文本字段变回

div

。该号码也将通过 ajax 更新到数据库中。

这个函数叫什么？
编写此代码的最佳方法是什么？

Answer 1

您可以执行以下操作：

有一个点击事件并动态创建一个文本框，它将 div 内的文本作为值。

甚至有一个模糊，它绑定到该文本框并进行 AJAX 调用，并成功更改 div 文本

假设您的 HTML 是这样的：

<div id="fullname">Amazing Spider man</div>

你的 JS 代码将是这样的：

$('#fullname').click(function(){
    var name = $(this).text();
    $(this).html('');
    $('<input></input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'txt_fullname',
            'size': '30',
            'value': name
        })
        .appendTo('#fullname');
    $('#txt_fullname').focus();
});

$(document).on('blur','#txt_fullname', function(){
    var name = $(this).val();
    $.ajax({
      type: 'post',
      url: 'change-name.xhr?name=' + name,
      success: function(){
        $('#fullname').text(name);
      }
    });
});

这在 jsfiddle

中得到了演示

Answer 2

使用

contentEditable

HTML5 有一个原生的

contentEditable

属性，并且具有 相当好的浏览器支持，因此如果它符合您的情况，您可能需要探索一下。只需将

contentEditable="true"

放在 div 上即可使其可点击和可编辑。更多信息这里和这里。另外，这里有一个插件，它可以更进一步，为

contentEditable

元素提供富文本、所见即所得工具和 HTML 支持。

要实际使用可编辑元素，您需要使用 JS 在输入发生时触发操作。在 OP 的情况下，在 JS 中，他们会将新编辑的内容放置在某处（例如数组），准备好 ajax 函数将其发送到外部数据库。

示例代码，无插件，无jquery：

var myEditableElement = document.getElementById('myContent');
myEditableElement.addEventListener('input', function() {
    console.log('--- input detected ---');
    console.log(myEditableElement.innerHTML);
});

<div id="myContent" contentEditable="true">This is an editable element. Click and type something!</div>

Answer 3

有jEditable：http://www.appelsiini.net/projects/jeditable

但是，X-editable 看起来更好：http://vitalets.github.io/x-editable/

Answer 4

这就是所谓的 jQuery 就地编辑。 jQuery 有许多可用的插件。

Answer 5

为什么不只保留一个输入字段，并在模糊时更改字段样式。您可以拿走所有内容，这样它看起来就不像输入，这样就不需要来回更改。对模糊进行 Ajax 调用。

Answer 6

我知道这是一个旧线程，但我不久前构建了一个完全执行此操作的项目：https://github.com/JackChilds/Preview-In-Place。

然后你可以像这样使用它：

// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
  return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
  // options
  previewGenerator: processData // reference to the function that processes the data
})

<div id="idOfElement" class="block">
  <textarea class="edit">Some Text Here</textarea>
  <div class="preview"></div>
</div>

<script src="https://cdn.jsdelivr.net/gh/JackChilds/Preview-In-Place@main/dist/previewinplace.min.js"></script>

当然你可以添加一些 CSS 让它看起来更整洁：

// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
  return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
  // options
  previewGenerator: processData // reference to the function that processes the data
})

.block {
  width: 200px;
}
.block .edit {
  border: none;
  outline: none;
  border-radius: 0;
  resize: none;
}
.block .edit, .block .preview {
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

/* Make the 'block' have a red background when in edit mode */
.block.state-edit .edit {
  background-color: rgba(131, 0, 0, 0.3);
}
/* Make the 'block' have a green background when in preview mode */
.block.state-preview .preview {
  background-color: rgba(9, 174, 0, 0.3);
}

<div id="idOfElement" class="block">
  <textarea class="edit" rows="1">Some Text Here</textarea>
  <div class="preview"></div>
</div>

<script src="https://cdn.jsdelivr.net/gh/JackChilds/Preview-In-Place@main/dist/previewinplace.min.js"></script>

Answer 7

您已经命名了整个过程。

首先，为所有数字或字段分配某个类。

<div class="editable">value</div>

然后，为该类分配一个单击事件。

$('.editable').click(function(){
 //replace element with input element containing the value
 //attach an onblur event to the new element
 $(newelement).blur(function(){
  //use $.ajax to send the element's value to your server
  //remove the input element and then replace the previous element with the new value
 });
});