如何使用 jquery/javascript 更改/编辑标签的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19221111/
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
how to change/edit value of label with jquery/javascript?
提问by r.r
i have a standart html label with value:
我有一个标准的 html 标签，其值：
<label id="telefon" value="101"></label>
i like to edit this value by clicking on the label and enter on the appeared textbox new value (like value="202").
我喜欢通过单击标签并在出现的文本框上输入新值（如value="202"）来编辑此值。
how can i do such a tricky thing?
我怎么能做这么棘手的事情？
i tried it with JQuery function, but it really dont wont to work:
我用 JQuery 函数尝试过它，但它真的不会工作：
$(function() {
$('a.edit').on("click", function(e) {
e.preventDefault();
var dad = $(this).parent().parent();
var lbl = dad.find('label');
lbl.hide();
dad.find('input[type="text"]').val(lbl.text()).show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
回答by
http://jsfiddle.net/jasuC/, Since you didnt provide the markup, take a look into this working example
http://jsfiddle.net/jasuC/，由于您没有提供标记，请查看此工作示例
$(document).on("click", "label.mytxt", function () {
var txt = $(".mytxt").text();
$(".mytxt").replaceWith("<input class='mytxt'/>");
$(".mytxt").val(txt);
});
$(document).on("blur", "input.mytxt", function () {
var txt = $(this).val();
$(this).replaceWith("<label class='mytxt'></label>");
$(".mytxt").text(txt);
});
回答by Claudio Santos
You don't need the jquery.
你不需要 jquery。
To made almost all tag elements editable set the contentEditableto true.
为了取得几乎所有的标签元素可编辑的设置contentEditable来true。
So, you can change using the default features of a HTML.
因此，您可以使用 HTML 的默认功能进行更改。
回答by Stphane
// You can add an event listener to your form tag and code the handler which will be common to all your labels (Fiddle HERE)
// 您可以向表单标签添加一个事件侦听器，并对所有标签通用的处理程序进行编码（Fiddle HERE）
// HTML
// HTML
<form id="myform">
<label style="background-color:#eee" title="101">Value is 101<label>
</form>
// JS
// JS
$(function(){
$('#myform').on('click',function(e){
var $label = $(e.target), $form = $(this), $editorInput = $('#editorInput'), offset = $label.offset();
if($label.is('label')){
if( !$editorInput.length){
$editorInput = $('<input id="editorInput" type="text" value="" style="" />').insertAfter($label);
}
$editorInput.css('display','inline-block')
.data('editingLabel', $label.get(0))
.focus()
.keydown(function(e){
var $l = $($(this).data('editingLabel')), $t = $(this);
if(e.which == 13){
$l .attr('title', $t.val().replace(/(^\s+)|(\s+$)/g,''))
.text('value is now ' + $l.attr('title'));
// UPDATE YOUR DATABASE HERE
$t.off('keydown').css('display','none');
return false;
}
});
}
});
});
// A bit of CSS
// 一些 CSS
#editorInput{display:none;padding:2px;border:1px solid #eee;margin-left:5px}
