Я не уверен, что он называется, но я хочу, чтобы у меня есть возможность щелкнуть, например. a div, содержащее число, и затем оно будет меняться во входное текстовое поле со значением, которое я нажимаю.
Затем я хочу отредактировать номер и щелкнуть (onblur event), и он вернется к div из текстового поля, показывающего новый отредактированный номер. Число также было бы обновлено в базе данных через ajax.
Что называется этой функцией? Каков наилучший способ закодировать это?
Вы можете сделать следующее:
Имейте событие щелчка и создайте текстовое поле на лету, которое берет текст в 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
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>Существует jEditable: http://www.appelsiini.net/projects/jeditable
Однако X-редактируемый выглядит намного приятнее: http://vitalets.github.io/x-editable/
Он называется редактированием jQuery. Для этого есть jQuery для плагинов.
Почему бы просто не остаться с одним полем ввода и сменить стили полей на размытие. Вы можете забрать все, чтобы он не выглядел как вход, так что нет необходимости менять туда и обратно. Сделайте вызов Ajax размытым.
Вы уже назвали весь процесс.
Сначала назначьте все ваши номера или поля некоторым классом.
<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
});
});