如何在onclick上编辑数据

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

HTML5具有contentEditable属性，具有非常好的浏览器支持，因此您可能希望首先进行探索，特别是如果您想要执行no-jquery。只需将contentEditable="true"放入div中即可使其可点击和编辑（基本文本）。

为了实际使用editable元素，您需要使用JS侦听器来“监视”元素并在输入时触发操作。在OP的情况下，在JS中，他们会将新编辑的内容放在某处（如数组），准备好将ajax函数发送到外部数据库。 More info here

此外，here's a plugin更进一步，并为这些字段提供更多WYSIWYG控件。

无论如何，这是一个示例代码，没有插件，没有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>

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

您已将整个过程命名为。

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

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