Question

当我点击编辑某些文字时，Jeditable会在文本区域的实际文本周围插入额外的空格。如何修剪或实际修复此问题？

Answer 1

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

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

Answer 2

找到原因。这太疯狂了！

如果html看起来像

那么就编辑将在文本周围插入空格

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

如果你的html看起来像这样 NOT 在文本周围插入空格

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

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

Answer 3

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

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

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

并将其替换为：

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

（Per Baloneysammitch 的建议）

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

Answer 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或类型为text的输入时，input_content基本上是一个字符串。当你使用select时，input_content是一个对象，并且对剪裁的反应不会很好。

这可能是一种更美妙的方式，而不是使用try-catch，但它可以完成工作。

Answer 5

嗯，这很奇怪。我没有用Jeditable来解决这个问题。

哦，jQuery有一个修剪功能：

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

Answer 6

已经有一段时间了，因为有人回答了这篇文章，但我遇到了同样的问题，并认为我会加上我的两分钱。这个问题只发生在firefox和safari中。 IE和Chrome似乎没有这个问题。

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

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

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

我发现通过在此时添加$.trim()，事情就像我预期的一样。

我确实发现，像Chirantan所做的那样，html的布局如果空间存在与否则会产生差异。

Answer 7

如果格式化有大量空格，则会发生这种情况。 jEditable尊重它并且不会修改你的内容..例如在VS IDE自动格式中创建了大量的空白，其中渲染HTML很好。

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

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

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

Answer 8

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

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

8 个答案: