WebフォームにContentEditableを使用することをお勧めしますか？

私はページ上のテキストを編集し、各フィールドのカーソルアウトの変更をコミットするフォームタイプのエディタを作成したいと思う。フォントやスタイルの変更はありません。まっすぐなボックスです。WebフォームにContentEditableを使用することをお勧めしますか？

私はいくつかのようなものを見たJEditableしかし、ボックスと[OK]をコミットするには、少し魅力的で直感的でないように見える必要があります。

私は、それぞれの要素にcontentEditable="true"を単に適用することについて不思議に思っていました。私はそれが同じことを達成すると思います。しかし、それは入力があるフォームではないので、私はjavascriptを介して変更を提出しなければならないと思いますが、それは私の状況では実行可能です。（JEditableやそれに類するもののように、JEditableのような要素ごとにjavascriptを気にするよりは、やや単純です。

これは合理的な解決策ですか？私はサイトのこの特定の部分のモバイルブラウザのサポートを心配していませんしかしまたは何かをそれをサポートします...）

出典

2011-08-15 Damon

ContentEditableは、入力ボックスでない場合、ユーザー入力には適していないことを除いて、正常に動作します。アクションの最善の方法は、浮動して隠れているdiv内にテキストエリアを置き、それを編集の場所に移動させることです（先頭の要素として）。もちろん、あなたの現在の要素からテキストボックスにテキストをコピーして、入力時にそれを消したりコミットしたりする必要があります。 –

JEditableはボタンを持たないように設定できますが、onblurを送信します。 – lulalala

コードが賢明それはこのようなものに見える必要があるでしょう：。これは、jQueryの構文はところで

$(".YourElementClassHere").click(function() { 
    $("#YourTextArea").position($(this).position()); 
    $("#YourTextArea").css("display", "block"); 
}); 

$("#YourTextArea").click(function() { 
    if (event.which == 13) { 
    $("#YourTextArea").css("display", "none"); 
    // Do something to commit this: $("#YourTextArea").text(); 
    } 
});

ですが、知っているべきではない人のためにこれは私は少し錆びているので、これが助けてくれることを願っています。このjavascriptには少しの変更が必要かもしれません。

出典

2011-08-15 06:51:33

私はそれを使用することができます。シームレスに見えるように、テキストボックスのスタイリングを入力引き継ぎにする合理的な方法があるのだろうかと思います。私は想像することができるjQueryのような特定のスタイルをつかむことができます。 – Damon

'（event.which == 13）'が何をしているのか分かりませんか？ – Damon

はい、可能ですが、textareasのようなものは非常に複雑な時に作業することができますが、あなたは通常のCSSでできる限り、javascriptで正確に同じスタイリングを行うことができます。 event.whichは、異なるブラウザのキー入力を検出するさまざまな方法のJQueryコンパイルであり、キー13が入力されている場合、ネット上の他のキーを参照することができます。非常に遅れて返信して申し訳ありません。 –

WebフォームにContentEditableを使用することをお勧めしますか？

答えて

関連する問題