Jeditable 在文本区域的文本周围插入额外的空格答案

【问题标题】：Jeditable inserts extra spaces around the text in text areaJeditable 在文本区域的文本周围插入额外的空格
【发布时间】：2010-04-09 07:24:49
【问题描述】：

当我单击编辑某些文本时，Jeditable 会在文本区域中的实际文本周围插入额外的空格。我该如何修剪或实际解决这个问题？

【问题讨论】：

标签： jquery textarea jeditable

【解决方案1】：

您实际上可以只传递一个函数来修剪您要编辑的字符串。在您的设置中使用它：

data    : function(string) {return $.trim(string)},
submit: "Save"

【讨论】：

太棒了。这真的很有用。
说真的。我将此添加到我构建所有可编辑对象的基础对象中，现在我可以根据需要格式化我的页面。真的很有用...
这真是一个很好的答案！谢谢。
这应该被标记为正确答案……这才是正确的处理方式！谢谢！
真的，这是一个很棒的答案（y）。你救了我朋友；）

【解决方案2】：

找到原因了。这太疯狂了！

如果您的 html 如下所示，就地编辑将在文本周围插入空格

<div id="inplace_edit_this">
     This is some text that will be edited in-place.
</div>

如果您的 html 看起来像这样，它会不在文本周围插入空格

<div id="inplace_edit_this">This is some text that will be edited in-place.</div>

我想知道是什么原因造成的。这可能是因为浏览器和 Javascript 解释 HTML 的方式不同。

【讨论】：

...未解决问题的根本原因，Symmitchry 的建议解决得很好
...但是如果您不会或不能更改 jEditable.js，这是的答案
我同意 dmytrivv。问题从未指定无法更改 jEditable。我尝试了上面的解决方案，一开始我仍然得到一个空格。 Johan Bjorling 和 Symmitchry 的解决方案始终有效。
这绝对是正确的答案。不过，我有点希望 jeditable 会采用在核心中使用修剪......当我可以简单地修复我的页面时，我不会编辑核心。
Greg DeVore 的方法允许在不编辑可编辑文件的情况下进行通用修复。 stackoverflow.com/a/9087222/76672

【解决方案3】：

这可能是旧消息，但我遇到了类似的问题：我还不知道为什么，但是在保存编辑过的文本输入后，下次我点击它时，插入了 11 个空格（每次）在可编辑文本之前。

经过多次反复试验，我终于通过编辑 jeditable.js 文件中的 ~239 行解决了这个问题：

content.apply(form, [input_content, settings, self]);

并将其替换为：

content.apply(form, [$.trim(input_content), settings, self]);

（根据 Baloneysammitch 的建议）

请注意，我几乎不知道自己在做什么，但这似乎有效！也许比我更有技巧的人可以解释那些额外的 11 个空格可能来自哪里......

【讨论】：

谢谢，这为我解决了同样的问题！如果您（或其他任何人）在 self.revert 中找到的预编辑文本遇到同样的问题，我对第 260 行左右进行了相同的更改，$.trim() 设置 self.revert 的值到，这解决了我的原始值空白问题。
你真的应该使用 Greg DeVore 的方法：stackoverflow.com/a/9087222/76672 不更新 jeditable 核心文件。

【解决方案4】：

我已经在我的应用程序中使用 JEditable 1.7.1 解决了这个问题。该解决方案实际上与 Symmitchry 的解决方案相同。

从第 204 行开始，有一个代码块确定 JEditable 应如何加载其数据。

/* set input content via POST, GET, given data or existing value */
var input_content;

if (settings.loadurl) {
  ...
} else if (settings.data) {
  ...
} else {
  ...
}
content.apply(form, [input_content, settings, self]);

在最后一行（我的版本中为第 239 行）之前添加 jQuery trim-function，这样你就可以得到：

/* set input content via POST, GET, given data or existing value */
var input_content;

if (settings.loadurl) {
  ...
} else if (settings.data) {
  ...
} else {
  ...
}

try {
    input_content = input_content.trim();
}
catch(e) {
    // DO NOTHING
}

content.apply(form, [input_content, settings, self]);

我把它放在 try-catch 中的原因是，当你使用带有 textarea 或文本类型输入的 JEditable 时，input_content 基本上是一个字符串。当你使用 select 时 input_content 是一个对象，并且不会很好地响应被修剪。

可能有一种更漂亮的方法来执行此操作，而不是使用 try-catch，但它可以完成工作。

【讨论】：

【解决方案5】：

嗯，这很奇怪。我没有遇到 Jeditable 的问题。

哦，好吧，jQuery 有一个修剪功能：

$.trim("  hello, how are you?  ");

【讨论】：

【解决方案6】：

已经有一段时间没有人回复这个帖子了，但我遇到了同样的问题，我想我应该加两分钱。这个问题只发生在 Firefox 和 Safari 中。 IE和chrome好像没有这个问题。

我在第 239 行尝试了 Symmitchry 对 $.trim() 的建议，但这对我不起作用。所以我做了一些回溯，发现问题首先出现在第 176 行附近：

self.revert = $(self).html();

由于这是一个 jquery 调用，我想知道 jquery 如何与上述浏览器交互是否存在问题。不确定...

我发现此时通过添加 $.trim() 可以按预期进行。

我确实发现，正如 Chirantan 所做的那样，html 的布局方式会影响是否存在空格。

【讨论】：

【解决方案7】：

如果格式分配了空格，就会发生这种情况。 jEditable 尊重它并且不会修改您的内容。例如，在 VS IDE 中，自动格式会产生巨大的空白，在这些空白中渲染 HTML 是可以的。

如果使用 jQuery，只需在调用 jEditable 之前修剪 DOM，如果你想确保在任何地方都没有空格

$('#BatchTable tbody td').each(function () {
      $(this).html($.trim($(this).html()));
});

oTable = $('#BatchTable').dataTable({
        "bJQueryUI": true
});

【讨论】：

【解决方案8】：

在我的情况下，解决方案是删除文件中第 390 行中的 </input> jquery.jeditable.js。前线：var input = $('<input type="hidden"></input>'); 适合我的线路：var input = $('<input type="hidden">');

【讨论】：