У меня есть элемент span, который я хочу сделать редактируемым при двойном щелчке. (То есть, пользователь может редактировать текст, и он будет сохранять, когда он/она нажимает на него.)
Эффект, который я хочу эмулировать, аналогичен тому, когда я дважды нажимаю свойства CSS в Инструментах разработчика Google Chrome. (См. Рисунок.)
Теперь тестируется и работает (по крайней мере, Firefox 8 и Chromium 14 на Ubuntu 11.04):
$('span').bind('dblclick',
function(){
$(this).attr('contentEditable',true);
});
Отредактировано в ответ на комментарий Randomblue (ниже):
... как определить, когда пользователь нажимает за пределы диапазона, так что я могу установить attr ('contentEditable', false)
Просто добавьте метод blur():
$('span').bind('dblclick', function() {
$(this).attr('contentEditable', true);
}).blur(
function() {
$(this).attr('contentEditable', false);
});
Если вы хотите решение, которое работает в современных браузерах ВСЕ, вот отличный маленький плагин jQuery, который я создал, который эмулирует описанную вами функциональность:
ПРОСТО УКАЗАТЬ ЭТО БЛОК В ВАШЕМ КОДЕКСЕ:
//plugin to make any element text editable
//http://stackoverflow.com/a/13866517/2343
$.fn.extend({
editable: function() {
var that = this,
$edittextbox = $('<input type="text"></input>').css('min-width', that.width()),
submitChanges = function() {
that.html($edittextbox.val());
that.show();
that.trigger('editsubmit', [that.html()]);
$(document).unbind('click', submitChanges);
$edittextbox.detach();
},
tempVal;
$edittextbox.click(function(event) {
event.stopPropagation();
});
that.dblclick(function(e) {
tempVal = that.html();
$edittextbox.val(tempVal).insertBefore(that).bind('keypress', function(e) {
if ($(this).val() !== '') {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
submitChanges();
}
}
});
that.hide();
$(document).click(submitChanges);
});
return that;
}
});
Теперь вы можете сделать любой элемент редактируемым просто путем вызова .editable() в объекте селектора jQuery, например:
$('#YOURELEMENT').editable();
Чтобы получить изменения после того, как пользователь отправит их, привяжите к событию "editsubmit", например:
$('#YOURELEMENT').editable().bind('editsubmit', function(event, val) {});
//The val param is the content that being submitted.
Вот сценарий: http://jsfiddle.net/adamb/Hbww2/
Я нашел этот приятный плагин jQuery: "X-редактируемое редактирование на месте с помощью Twitter Bootstrap, jQuery UI или чистого jQuery" http://vitalets.github.com/x-editable/
Вышеупомянутые работы: я тестировал это в этом jsfiddle: http://jsfiddle.net/nXXkw/
Кроме того, чтобы удалить редактируемость, когда пользователь нажимает на элемент, включите:
$('span').bind('blur',function(){
$(this).attr('contentEditable',false);
});
Я нашел много ответов, чтобы быть устаревшими на эту тему, но adamb был самым легким решением для меня, спасибо.
Однако его решение было прослушивать несколько раз из-за того, что он не удалял событие нажатия клавиши вместе с элементом.
Здесь обновленный плагин с использованием $.on() вместо $.bind() и с обработчиком события нажатия клавиши, когда элемент снова создается.
$.fn.extend({
editable: function() {
var that = this,
$edittextbox = $('<input type="text"></input>').css('min-width', that.width()),
submitChanges = function() {
that.html($edittextbox.val());
that.show();
that.trigger('editsubmit', [that.html()]);
$(document).off('click', submitChanges);
$edittextbox.detach();
},
tempVal;
$edittextbox.click(function(event) {
event.stopPropagation();
});
that.dblclick(function(e) {
tempVal = that.html();
$edittextbox.val(tempVal).insertBefore(that).off("keypress").on('keypress', function(e) {
if ($(this).val() !== '') {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
submitChanges();
}
}
});
that.hide();
$(document).one("click", submitChanges);
});
return that;
}
});