7

テキストをクリックして編集すると、Jeditable がテキスト領域の実際のテキストの周りに余分なスペースを挿入してくれます。これをトリミングまたは実際に修正するにはどうすればよいですか?

4

8 に答える 8

18

実際には、編集する文字列をトリミングする関数を渡すだけです。設定でこれを使用します。

data    : function(string) {return $.trim(string)},
submit: "Save"
于 2012-01-31T21:28:30.387 に答える
12

理由が見つかりました。そしてそれは非常識です！

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 を解釈する方法の違いによるものです。

于 2010-04-14T13:48:42.973 に答える
8

This might be old news, but I was faced with as similar problem: I don't know why yet, but after saving an edited text input, the next time I clicked on it, 11 spaces (every time) were inserted before the editable text.

After lots of trial and error, I finally solved this problem by editing the line ~239 in the jeditable.js file:

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

and replaced it with:

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

(Per Baloneysammitch's suggestion)

Note that I have pretty much no idea what I'm doing, but this seemed to work! Maybe someone with more skill than me could explain where those extra 11 spaces might be coming from...

于 2010-12-19T23:47:41.917 に答える
3

アプリケーションの JEditable 1.7.1 でこの問題を修正しました。このソリューションは、Symitchry のソリューションと実質的に同一です。

行 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 トリム関数を追加すると、次のようになります。

/* 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 に入れる理由は、JEditable を textarea またはテキスト型の入力で使用する場合、input_content は基本的に文字列であるためです。select を使用する場合、input_content はオブジェクトであり、トリミングされるとうまく応答しません。

try-catch を使用するよりも、これを行うためのより美しい方法がおそらくありますが、それは仕事を完了させます。

于 2011-05-17T15:40:30.043 に答える
1

うーん、それは奇妙です。私はJeditableでその問題を抱えていません。

まあ、jQuery にはトリム機能があります。

$.trim("  hello, how are you?  ");
于 2010-04-09T21:40:25.547 に答える
1

誰かがこの投稿に回答してからしばらく経ちましたが、私は同じ問題に遭遇し、2セントの価値を追加しようと考えました. この問題は、Firefox と Safari でのみ発生しました。IE と chrome にはこの問題はないようです。

239 行目で Symitchry の提案を試しましたが、うまくいき$.trim()ませんでした。そのため、バックトラックを行ったところ、この問題は最初に 176 行目あたりで次の行で発生していることがわかりました。

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

これは jquery 呼び出しであるため、jquery が上記のブラウザーと対話する方法に問題があるのではないかと思います。わからない...

$.trim()この時点でa を追加すると、期待どおりに機能することがわかりました。

Chirantan が行ったように、html のレイアウト方法によって、スペースがあるかどうかに違いがあることがわかりました。

于 2011-03-24T13:28:49.387 に答える
0

私の場合、解決策は</input>、ファイル jquery.jeditable.js の 390 行目を削除することでした。前の行:var input = $('<input type="hidden"></input>'); 私のために働く行:var input = $('<input type="hidden">');

于 2015-02-14T19:11:46.663 に答える
0

これは、フォーマットにスペースが割り当てられている場合に発生します。jEditable はそれを尊重して扱い、コンテンツを変更しません。たとえば、VS IDE の自動フォーマットでは、HTML のレンダリングが問題ない大きなギャップが生じます。

jQuery を使用している場合は、必要に応じて jEditable を呼び出す前に DOM をトリムするだけで、どこにも空白がないことを確認できます

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

oTable = $('#BatchTable').dataTable({
        "bJQueryUI": true
});
于 2012-07-10T14:34:54.143 に答える