javascript - 如何单击并编辑内联元素

Question

我不确定它叫什么，但我希望能够单击例如div包含数字的 a，然后它将变为输入文本字段，其值是我单击的数字。

然后我想编辑号码，然后点击关闭（onblur事件），它会从显示新编辑号码的文本字段中变回 , div。该数字也将通过 ajax 更新到数据库中。

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

score 19 · Accepted Answer

您可以执行以下操作：

有一个点击事件并动态创建一个文本框，它将 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

score 13 · Accepted Answer

HTML5 有一个非常好的浏览器支持contentEditable属性，所以如果它符合你的情况并且你想不做 jquery，你可能想先探索一下。只需放入一个 div 即可使其可点击和可编辑（基本文本）。contentEditable="true"

要实际使用可编辑元素，您需要使用 JS 来观察元素并在有输入时触发动作。在 OP 的情况下，在 JS 中，他们会将新编辑的内容放在某处（如数组），以便 ajax 函数将其发送到外部数据库。更多信息在这里和这里。

此外，这里有一个插件可以更进一步，并为这些字段提供更多所见即所得的控件。

无论如何，这是一个示例代码，没有插件，没有 jquery：

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

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

score 4 · Accepted Answer

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

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

在此处输入图像描述

score 2 · Accepted Answer

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

score 2 · Accepted Answer

2

它被称为 jQuery 就地编辑。jQuery 提供了许多可用的插件。

于 2013-04-24T21:44:00.727 回答

score 1 · Accepted Answer

你已经命名了整个过程。

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

<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
 });
});

score 1 · Accepted Answer

我知道这是一个旧线程，但我不久前建立了一个完全这样做的项目：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>

javascript - 如何单击并编辑内联元素

7 回答 7

Related

Reference