使用 jQuery 进行内联编辑

发表于 作者

我们都听说过内联编辑。Flickr 在很多地方使用它，比如更改图片的标题或描述。

对于那些不知道的人来说，内联编辑是指您可以点击文本，它会变成一个文本框，用户可以在其中进行编辑。当用户按下 Enter 键时，编辑后的文本将发送到脚本，该脚本可以执行一些操作，比如将文本提交到数据库。

现在，多亏了 Dylan Verheul，使用 jQuery 做这件事变得前所未有的简单。他创建了一个名为 Editable 的插件，它可以让您只需一行代码即可创建内联编辑字段。

$(element).editable(url, options);

源代码以及一个（损坏的修复的）演示可以在这里看到 这里。我在我的网站上整理了一个简单的演示，可以在 这里 访问。

关于“使用 jQuery 进行内联编辑”的 18 个想法

  1. Dylan Verheul 于 说：

    你说得对，我的演示坏了。可能是因为我换了另一家 webhost，我今天晚些时候会看一下。

  4. Patrick 于 说：

    两个演示都可以正常工作，但是第二个演示在插入单引号时出现了一个问题，它会插入一个斜杠。

    不过插件很棒。我想知道 jQuery 是否可以轻松地实现内联编辑。

  7. seventoes 于 说：

    是的，john 目前正在进行新设计的开发。完成后，大家都会知道是谁在写文章，以及我们的 gravatar，以便提供一些视觉上的表示。

  10. seventoes 于 说：

    是的，我也在想这个问题，但这样就没有办法取消了。如果你输入了一些东西，然后意识到你不想编辑那个，就无法取消输入。

  11. Drydenmaker 于 说：

    不错的工作。我想看到的一项改进是，除了编辑的项目之外，还有指示表明项目已保存。如果你想编辑两次，就会出现额外的文本...只是一个想法...谢谢。

  12. Geezer 于 说：

    我在将更改后的结果重新写入控件时遇到了一些麻烦，你能展示一下 editable_post.php 代码吗？我只是想弄清楚如何检查 post 变量。
    谢谢大家。

  13. seventoes 于 说：

    @Drydenmaker，这只是一个例子。你也可以在选项中使用回调函数，如下所示
    $(element).editable(“editable_post.php”, {callback: function(something) {
    $(‘feedback’).show();
    }, saving:””});
    请注意，这还没有经过测试，但应该可以正常工作。

    @Geezer，我已经更新了我的页面。请查看。

  14. ned 于 说：

    很好...但是...

    如何在服务器上区分不同的输入字段？

    在 PHP 中，我只获得了所有字段的 $_POST[‘q’]。

  15. seventoes 于 说：

    ned，你有两个选择，因为插件本身不支持这种功能。

    1. 使用不同的代码行将每个元素设置为可编辑，并添加一些额外的参数，比如 {extraParams:{field:’Username’}} 或类似的参数，然后通过 $_POST[‘field’] 或其他方式获取这些额外的参数。

    2. 自己修改插件，使用元素的 id 或 name 作为单独的参数。

  16. Geezer 于 说：

    现在已经可以正常工作了。我添加了一个额外的 size 选项
    并在函数中添加了 i.size = options.size;
    这样就可以让我设置输入的长度。

    值得注意的是，如果你在页面上使用很多不同的变量，你需要调整类名。

    “.$fullresult[“products_name”].”

    $(document).ready(function() {$(“.products_name”).editable(“_getaddress.php”, {saving:””, extraParams:{products_name:1,orders_id:,orders_products_id:},size:70 });});

    否则，post 变量就会变得混乱，导致问题。

  17. Paul Watson 于 说：

    很棒的插件，谢谢大家。

    关于 onblur 问题，也许可以保留 onBlurDelay 选项，但添加一个 onBlur 参数，可以将函数附加到该参数。

  18. Neil Merton 于 说：

    看起来很有希望，感谢你的辛勤工作。

    但是，我对如何实现它以便更新列表中的项目有点困惑。我使用 ColdFusion，并将操作设置为使用以下参数更新数据库

    ID = #url.ID#
    和
    WebPrice = #url.price#

    当我提交字段（#qCarsList.WebPrice#，其中 id 为 price1，qCarsList.WebPrice 是获取项目列表的 SQL 查询）时，我收到一个返回到编辑区域的错误，提示在 url 范围内未找到价格。这意味着 #qCarsList.WebPrice# 中的内容没有被传递。

    我认为我需要在 Javascript 的 extraParams 部分做些什么，但我需要一些指导

    $(document).ready(function()
    {
    $(“.editor”).editable(“price.cfm”, { saving:””, extraParams:{id:42} });
    });

    任何帮助将不胜感激。

    提前感谢。