JQuery的编辑到位，无插件 [英] JQuery Edit in Place, No Plugins

问题描述

我试图使用jQuery（无插件），使到位控制编辑。我想的功能是这样的。
在段落的点击，该段将被转换成可编辑的文本区域。
一旦用户点击了第（失去焦点）文本将被保存。

I'm trying to use Jquery (with no plugins) to enable an edit in place control. The functionality I would like is this. On click of paragraph, the paragraph will be converted into an editable text area. Once the user clicks out paragraph (loses focus) the text will be saved.

下面我有以下code，目前第1部分工作正常，但是当我点击可编辑区域中的的 textarea的行数=10COLS =160 的获取生成的，我不能输入。
以下是我有

I have the following code below and currently part 1 is working, but when I click in the editable area textarea rows="10" cols="160 gets generated and I can't type. Here is what I have

$("#Para1").click(function () {
            var textarea = '<div><textarea rows="10" cols="160">' + $(this).html() + '</textarea>';
            $(this).html(textarea);
            $("textarea.textarea").focus();

            $("textarea.textarea").blur(function () {
                var value = $(this).val();
                $("#Para1").text(value);

            });             

我曾尝试每基础下面的链接，我的code，但都没有成功。

I have tried to base my code per the link below, but haven't had success.

<一个href=\"http://www.unleashed-technologies.com/blog/2010/01/13/jquery-javascript-easy-edit-place-input-boxes-and-select-boxes\" rel=\"nofollow\">http://www.unleashed-technologies.com/blog/2010/01/13/jquery-javascript-easy-edit-place-input-boxes-and-select-boxes

推荐答案

我用2 HTML元素会解决这个问题，这显示/隐藏在必要的时候：

I would solve this using 2 html elements, that are shown/hidden when necessary:

<div id="Para1">blabla</div>
<textarea id="editable" style="display:none" rows="10" cols="160"></textarea>

然后使用下面的JavaScript：

Then use the following Javascript:

$("#Para1").click(function () {
    $('#editable').html($(this).html()).show().focus();
    $(this).hide();
});

$("#editable").blur(function () {
    $('#Para1').html($(this).val()).show();
    $('#editable').hide();
});

编辑：移动上的＃PARA1'click处理程序的允许#editable外单击处理程序。无需多次把它挂。更新小提琴这里。

这是例子的jsfiddle可以发现 rel=\"nofollow\">。

An example JsFiddle can be found here.

这篇关于JQuery的编辑到位，无插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！