javascript 如何点击并编辑一个元素内联

kgsdhlau  于 12个月前  发布在  Java
关注(0)|答案(7)|浏览(215)

我不知道它叫什么,但我希望能够点击包含数字的div,然后它将变成一个输入文本字段,其值是我点击的数字。
然后我想编辑这个数字,然后点击off(onblur事件),它将从显示新编辑的数字的文本字段变回div。这个数字也将通过aplog更新到数据库中。
这个函数叫什么?
什么是最好的编码方式?

gcuhipw9

gcuhipw91#

您可以执行以下操作:
有一个点击事件,并在运行中创建一个文本框,它将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中演示

vof42yt1

vof42yt12#

使用HTML5的contentEditable

HTML5有一个原生的contentEditable属性,具有很好的浏览器支持,所以如果它符合您的情况,您可能想要探索这个属性。只需将contentEditable="true"放在div上即可使其可点击和可编辑。更多信息herehere。此外,here's a plugin进一步为contentEditable元素提供富文本,WYSIWYG工具和HTML支持。
要实际使用可编辑元素,您需要使用JS在输入发生时触发一个操作。对于原始帖子,他们会将输入内容传递给另一个函数,该函数将其发送到外部数据库。

示例代码,无插件,无jquery:

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

个字符

vhipe2zx

vhipe2zx4#

它被称为jQuery就地编辑。jQuery中有许多插件可以用于此。

thigvfpy

thigvfpy5#

为什么不只保留一个输入字段,并在blur上更改字段样式。您可以将所有内容都删除,这样看起来就不像输入,这样就不需要来回更改。

inn6fuwd

inn6fuwd6#

我知道这是一个旧的线程,但我建立了一个项目,正是这样做了一段时间前: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
})

个字符
当然,你可以添加一些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>
hgncfbus

hgncfbus7#

你已经把整个过程命名了。
首先,将所有数字或字段分配给某个类。

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

相关问题