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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

Существует jEditable: http://www.appelsiini.net/projects/jeditable

Однако, X-редактируемые выглядит гораздо приятнее: http://vitalets.github.io/x-editable/

Answer 4

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

Answer 5

Вы можете сделать следующее:

Есть событие щелчка и создать текстовое поле на лету, который принимает текст внутри 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 6

Все изменилось. HTML5 имеет атрибут contentEditable с уже довольно хорошей поддержкой браузера, поэтому вы можете сначала изучить это, особенно если вы хотите сделать no-jquery.

Простое размещение contentEditable = true в div сделает его доступным и редактируемым (основной текст). Вы можете настроить базового слушателя и подать обновление в массив, готовый для сохранения через ajax. More info here.

Кроме того, here's a plugin, который принимает его и дает больше элементов управления WYSIWYG для этих полей.

В любом случае, вот пример кода, нет плагинов, нет JQuery:

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

<div id="myContent" contentEditable=true>This is a paragraph. Click to make it editable.</div>