Javascript 使用表格和自动增长的问题

我使用和CakePHP处理一个Web项目。我使用作为一个内置编辑插件。对于文本区域，我使用扩展

我有两个问题：

• 首先，autogrow只适用于Firefox，而不适用于IE、Safari、Opera和Chrome
• 第二，我需要一个表的回调事件，当它完成显示编辑组件时，重新计算

我对Javascript不太熟悉，所以我不能自己扩展/更正这两个库。有没有人使用过另一个js库来进行具有自动增长文本区域的就地编辑（没有像TinyMCE这样的完整编辑器，我需要一个纯文本解决方案）

我还发现，它适用于其他浏览器，但没有可编辑的集成

---

（对不起我的英语）

我在任何浏览器中都没有发现使用带jeditable的自动增长有任何问题，但下面是带jeditable的Growfield的一个实现。它的工作原理与jeditable的Autogrow插件的工作原理基本相同。您可以为该表创建一个特殊的输入类型，并对其应用.growfield（）。下面是必要的javascript，可以提供一个演示

/*这是growfield与表的集成
如果你为它创建一个输入类型，你几乎可以使用任何你想要的字段插件。
它只需要“元素”功能（创建可编辑字段）和“插件”
将效果应用于字段的函数。这与中的代码非常接近
jquery.jeditable.autogrow.js输入类型，该输入类型随jeditable一起提供。
*/
$.editable.addInputType（'growfield'{
元素：功能（设置，原始）{
var textarea=$（''）；
if（settings.rows）{
textarea.attr（'rows'，settings.rows）；
}否则{
textarea.height（设置.height）；
}
if（settings.cols）{
textarea.attr（'cols'，settings.cols）；
}否则{
textarea.width（settings.width）；
}
//将在呈现textarea时执行
textarea.ready（函数（）{
//在此处实现滚动窗格代码
});
$（this）.append（textarea）；
返回（文本区域）；
},
插件：功能（设置，原始）{
//将growfield效果应用于在位编辑字段
$（'textarea'，this.growfield（settings.growfield）；
}
});
/*表初始化*/
$（函数（）{
$（'.editable_textarea'）.editable（'postto.html'{
键入：“growfield”，//告诉表使用上面的growfield输入类型
提交：'确定'，//此选项和以下选项是可选的
工具提示：“单击以编辑…”，
onblur：“忽略”，
growfield:{}//使用此选项将选项传递给已创建的growfield
});
})

---

谢谢你，亚历克斯您的growfield插件可以正常工作。

---

与此同时，我设法解决了另一个问题。我采取了另一种方法，在jeditable插件中侵入了一个回调事件。这并不像我想的那么难…

骑士杀手：你说Autogrow只适用于FireFox是什么意思？我刚刚用FF3、FF2、Safari、IE7和Chrome进行了测试。它们都很好用。我没有歌剧

---

Alex：是否有用于Growfield表自定义输入的下载链接？我想从我的博客链接它。真是太棒了

Mika Tuupola：如果您对我修改的表（添加了两个回调事件）感兴趣，您可以。如果您能在官方版本的绝地表中提供这些活动，那就太好了

这是我的（简化的）集成代码。我使用这些事件的目的不仅仅是为了悬停效果。这只是一个用例

$('.edit_memo').editable('/cakephp/efforts/updateValue', {
  id            : 'data[Effort][id]',
  name          : 'data[Effort][value]',
  type          : 'growfield',
  cancel        : 'Abort',
  submit        : 'Save',
  tooltip       : 'click to edit',
  indicator     : "<span class='save'>saving...</span>",
  onblur        : 'ignore',
  placeholder   : '<span class="hint">&lt;click to edit&gt;</span>',
  loadurl       : '/cakephp/efforts/getValue',
  loadtype      : 'POST',
  loadtext      : 'loading...',
  width         : 447,
  onreadytoedit : function(value){
    $(this).removeClass('edit_memo_hover'); //remove css hover effect
  },
  onfinishededit : function(value){
    $(this).addClass('edit_memo_hover'); //add css hover effect
  }
});

$（'.edit_memo'）。可编辑（'/cakephp/efforces/updateValue'{
id:“数据[努力][id]”，
名称：“数据[工作量][价值]”，
键入：“growfield”，
取消：“中止”，
提交：“保存”，
工具提示：“单击以编辑”，
指标：“保存…”，
onblur:“忽略”，
占位符：“单击以编辑”，
loadurl:“/cakephp/efforces/getValue”，
loadtype:“POST”，
loadtext:“正在加载…”，
宽度：447，
onreadytoedit:函数（值）{
$（this）.removeClass（'edit_memo_hover'）；//删除css悬停效果
},
onfinishededit：函数（值）{
$（this）.addClass（'edit_memo_hover'）；//添加css悬停效果
}
});

我不知道到底是什么错误。。。当我点击应该可编辑的元素时，我在自动增长库的IE7中遇到了一个javascript错误。特克斯地区正在展示，但没有签名。在其他浏览器上，我没有收到错误消息。。。

$('.edit_memo').editable('/cakephp/efforts/updateValue', {
  id            : 'data[Effort][id]',
  name          : 'data[Effort][value]',
  type          : 'growfield',
  cancel        : 'Abort',
  submit        : 'Save',
  tooltip       : 'click to edit',
  indicator     : "<span class='save'>saving...</span>",
  onblur        : 'ignore',
  placeholder   : '<span class="hint">&lt;click to edit&gt;</span>',
  loadurl       : '/cakephp/efforts/getValue',
  loadtype      : 'POST',
  loadtext      : 'loading...',
  width         : 447,
  onreadytoedit : function(value){
    $(this).removeClass('edit_memo_hover'); //remove css hover effect
  },
  onfinishededit : function(value){
    $(this).addClass('edit_memo_hover'); //add css hover effect
  }
});