javascript jQuery：onclick，编辑字段并显示+保存到变量中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3609975/
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
jQuery: onclick, edit field and show+save into an variable
提问by Karem
Right now I have this in Javascript without jQuery:
现在我在没有 jQuery 的 Javascript 中有这个：
Here is it: http://jsbin.com/ewihu3
这是它：http: //jsbin.com/ewihu3
It's working just fine, but I wish to use jQuery for making the code simpler and shorter.
它工作得很好，但我希望使用 jQuery 来使代码更简单、更短。
I want exactly same things to do as on the example above, that when you click on the text, it should turn into an input field. And on blur it should display what you've edited in the box, and then make a variable (like e.value on the example above) so I can send that in a ajax call later.
我想要做与上面例子完全相同的事情，当你点击文本时，它应该变成一个输入字段。在模糊时，它应该显示您在框中编辑的内容，然后创建一个变量（如上面示例中的 e.value），以便我稍后在 ajax 调用中发送它。
How can i do this in jQuery?
我怎样才能在 jQuery 中做到这一点？
回答by PJP
You can use the jEditable plugin
您可以使用jEditable 插件
Or you can start something similar pretty simply by yourself too, with something like this:
或者你也可以简单地自己开始类似的事情，像这样：
$('span.editable').click(function() {
var input = $('<input type="text" />', {
value: $(this).text()
}).click(function() {
$.get('editsave.php?tekstny=' + $(this).value(), function(response) {
var span = $('span', {
text: response
});
$(this).replaceWith(span);
});
});
$(this).replaceWith(input);
});
回答by qasim ali
Editable header or Button by clicking on edit button, type your own text and click on Ok to replace your text.
单击编辑按钮可编辑标题或按钮，键入您自己的文本，然后单击确定以替换您的文本。
function editable() {
var h1 = document.getElementsByTagName("H1")[0];
var att = document.createAttribute("contenteditable");
att.value = "true";
h1.setAttributeNode(att);
}
function noteditable() {
var h1 = document.getElementsByTagName("H1")[0];
var att = document.createAttribute("contenteditable");
att.value = "flase";
h1.setAttributeNode(att);
}
function editable2() {
var input = document.getElementsByTagName("input")[0];
var att = document.createAttribute("type");
att.value = "text";
input.setAttributeNode(att);
}
function noteditable2() {
var input = document.getElementsByTagName("input")[0];
var att = document.createAttribute("type");
att.value = "button";
input.setAttributeNode(att);
}
$('.my-button').click(function() {
$(".my-textbox").focus()
});
$('.my-button2').click(function() {
$(".button").focus()
});body {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class='my-textbox' contenteditable="false">Hello World</h1>
<button class='my-button' onclick="editable()">Edit</button>
<button onclick="noteditable()">OK</button>
<br>
<br>
<br>
<input type="button" class="button" value="Hello World" />
<br>
<br>
<button class='my-button2' onclick="editable2()">Edit</button>
<button onclick="noteditable2()">OK</button>