Как редактировать данные onclick

Я не уверен, что он называется, но я хочу, чтобы у меня есть возможность щелкнуть, например. a div, содержащее число, и затем оно будет меняться во входное текстовое поле со значением, которое я нажимаю.

Затем я хочу отредактировать номер и щелкнуть (onblur event), и он вернется к div из текстового поля, показывающего новый отредактированный номер. Число также было бы обновлено в базе данных через ajax.

Что называется этой функцией? Каков наилучший способ закодировать это?

Ответы

Ответ 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

Ответ 2

HTML5 имеет атрибут contentEditable с довольно хорошей поддержкой браузера, поэтому вы можете сначала изучить это, особенно если вы хотите выполнить no-jquery. Простое помещение contentEditable="true" в элемент div сделает его интерактивным и доступным для редактирования (основной текст).

Для практического использования редактируемого элемента вам нужно использовать JS-слушатель, чтобы "наблюдать" за элементом и запускать действие при его вводе. В случае OP в JS они помещали бы недавно отредактированный контент где-то (например, в массив), готовый для функции ajax, чтобы отправить его во внешнюю базу данных. Больше информации здесь.

Кроме того, здесь плагин, который идет дальше и дает больше элементов управления 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>

Ответ 4

Он называется редактированием jQuery. Для этого есть jQuery для плагинов.

Ответ 5

Почему бы просто не остаться с одним полем ввода и сменить стили полей на размытие. Вы можете забрать все, чтобы он не выглядел как вход, так что нет необходимости менять туда и обратно. Сделайте вызов Ajax размытым.

Ответ 6

Вы уже назвали весь процесс.

Сначала назначьте все ваши номера или поля некоторым классом.

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

Затем присвойте этому классу событие click.

$('.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 value to your server
  //remove the input element and then replace the previous element with the new value
 });
});