使用jQuery可编辑的文本功能

我有一个形象的按钮,当我点击它,我希望有一个特定的领域,从文字到一个可编辑的文本框,有点像一个动态的编辑按钮。

所以,我有明文具有一定的ID(即ID =“text1”中),当我按一下按钮,文本更改为可编辑的字段,可能像$("#text1").hide();然后$("#field1").show();但在与我需要给字段中的文本值,然后当我按一下按钮保存我应该隐藏输入字段,并只显示新值的文本。

任何帮助将不胜感激。

谢谢:D

--------------解决方案-------------

给定一个输入字段,用一个段落 id="text1"和一个按钮。

<input type="text" />
<p id="text1">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<button>Copy</button>

这个简单的jQuery将复制文本的段落,隐藏和显示输入与该段文字。

$("button").click(function() {
$("input").val(
$("#text1").hide().text()
).show();
});

下面是一个示例。

只是为了好玩,我写了一个小脚本,使<editable>的段落功能。 刚一类添加.editable任何段落和jQuery采取其他的事情。 我还没有扩展到允许多个编辑和我差不多开始编写AJAX调用保存到数据库中,因为我很无聊但由于阳光灿烂,我想我宁愿去海边。 这里是我的代码进行了抽样。

$(".editable").each(function(i) {
var $this = $(this);
$this.attr("id", "orig-" + i);

var $edit = $("<button />")
.text("edit")
.attr("id", "update-" + i)
.click(function() {
var $input = $('<input type="text" />')
.attr("id", "edit" + i)
.val($this.text());

var $save = $('<button>Save</button>')
.click(function() {
var $new = $("<p />").text($input.val());
$input.replaceWith($new);
$(this).hide();
});
$(this).replaceWith($save);

$this.replaceWith($input);
});

$(this).after($edit)
});

样品

你真的不需要所有的ID的,但如果你能做些新的价值观一个帖子,你可以很容易地引用到的元素。

还不错。 文本进入文本字段的值区域。 所以把它从文本区,将其保存在一个临时变量,并把它放在文本框。

事实上,你甚至不需要临时,我不认为,它应该是这个样子

$('#field1').val($('#text1').text)

请注意,这是未经测试。 您可能会发现这个SO文章是价值。

分类:jQuery的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.856 (s). 10 q(s)