Javascript 使跨度元素“可编辑”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8548126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make span element "editable"
提问by Randomblue
I have a spanelement that I want to become editable upon double-click. (That is, the user can edit the text and it will save when s/he clicks outside.)
我有一个span要在双击时变为可编辑的元素。（也就是说，用户可以编辑文本，并在他/她点击外部时保存。）
The effect I want to emulate is similar to when I double-click CSS properties in the Google Chrome Developer Tools. (See picture.)
我想要模拟的效果类似于我在 Google Chrome 开发者工具中双击 CSS 属性时的效果。（见图片。）
回答by David says reinstate Monica
Now tested, and does work (at least Firefox 8 and Chromium 14 on Ubuntu 11.04):
现在已经过测试，并且可以正常工作（在 Ubuntu 11.04 上至少是 Firefox 8 和 Chromium 14）：
$('span').bind('dblclick',
function(){
$(this).attr('contentEditable',true);
});
Editedin response to Randomblue's comment (below):
编辑以回应 Randomblue 的评论（如下）：
...how do I detect when the user clicks outside the span, so that I can set attr('contentEditable', false)
...如何检测用户何时在跨度外单击，以便我可以设置 attr('contentEditable', false)
Just append the blur()method:
只需附加blur()方法：
$('span').bind('dblclick', function() {
$(this).attr('contentEditable', true);
}).blur(
function() {
$(this).attr('contentEditable', false);
});
回答by adamb
If you want a solution that works in ALLmodern browsers, here's a nifty little jQuery plugin I made that emulates the functionality you described:
如果你想要一个适用于所有现代浏览器的解决方案，这是我制作的一个漂亮的小 jQuery 插件，它模拟了你描述的功能：
SIMPLY DROP THIS BLOCK INTO YOUR CODE-BASE:
只需将此块放入您的代码库中：
//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;
}
});
Now you can make any element editable simply by calling .editable() on a jQuery selector object, like so:
现在，您可以通过在 jQuery 选择器对象上调用 .editable() 来使任何元素可编辑，如下所示：
$('#YOURELEMENT').editable();
To get the changes after the user submits them, bind to the "editsubmit" event, like so:
要在用户提交更改后获取更改，请绑定到“editsubmit”事件，如下所示：
$('#YOURELEMENT').editable().bind('editsubmit', function(event, val) {})?;
//The val param is the content that's being submitted.
Here's a fiddle demo: http://jsfiddle.net/adamb/Hbww2/
这是一个小提琴演示：http: //jsfiddle.net/adamb/Hbww2/
回答by Daviddd
I found this nice jQuery plugin: "X-editable In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery" http://vitalets.github.com/x-editable/
我发现了这个不错的 jQuery 插件：“使用 Twitter Bootstrap、jQuery UI 或纯 jQuery 进行 X-editable 就地编辑” http://vitalets.github.com/x-editable/
回答by Richard
I found many answers to be out of date on this topic, but adamb's was the easiest solution for me, thank you.
我发现很多关于这个主题的答案已经过时了，但是adamb 对我来说是最简单的解决方案，谢谢。
However, his solution was bugged to fire multiple times due to not removing the keypress event along with the element.
但是，由于没有将 keypress 事件与元素一起删除，他的解决方案被多次触发。
Here's the updated plugin using $.on()instead of $.bind()and with the keypress event handler being removed when the element is created again.
这是更新后的插件，使用$.on()而不是$.bind()在再次创建元素时删除 keypress 事件处理程序。
$.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;
}
});
回答by Aaron
The above works: I've tested it in this jsfiddle: http://jsfiddle.net/nXXkw/
以上工作：我已经在这个jsfiddle中测试过它：http: //jsfiddle.net/nXXkw/
Also, to remove the editability when user clicks off of the element, include:
此外，要在用户单击元素时删除可编辑性，请包括：
$('span').bind('blur',function(){
$(this).attr('contentEditable',false);
});
