web-dev-qa-db-ja.com

HTML5を使用して、フォーム送信でcontenteditableフィールドを使用するにはどうすればよいですか？

そのため、データベースから動的に入力される一連の段落要素があります。要素をコンテンツ編集可能にしました。次に、標準のフォーム送信を介して、dbに編集内容を送信します。 contenteditable要素をポストバックする方法はありますか？

htmlcontenteditable
36
MFB

JavaScriptは何らかの方法で使用する必要があり、textareaなどの場合のように「標準」フォーム要素としては機能しません。必要に応じて、フォーム内に非表示のtextareaを作成し、フォームのonsubmit関数でcontenteditableのinnerHTMLをtextareaの値にコピーできます。または、ajax/xmlHttpRqeuestを使用して、もう少し手動でデータを送信することもできます。

function copyContent () {
    document.getElementById("hiddenTextarea").value =  
        document.getElementById("myContentEditable").innerHTML;
    return true;
}


<form action='whatever' onsubmit='return copyContent()'>...
36
rob

誰かが興味を持っている場合、私は同様の問題の解決策をVueJSで修正しました。私の場合、私は持っています：

<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>

「データ」では、mainMessageのデフォルト値を設定できます。

methods: {
  updateMainMessage: function(e) {
    this.mainMessage = e.target.innerText;
  }
}

「d-none」は、表示なしのBoostrap 4クラスです。そのように単純で、通常のフォームの送信中に「gift [main_message]」内のcontenteditableフィールドの値を取得できます。たとえば、AJAXが必要です。フォーマットに興味はありませんしたがって、「innerText」は「innerHTML」よりもうまく機能します。

2
Alberto T.

標準のフォーム送信である必要はありますか？入力でフォームを使用できない、または使用したくない場合は、AJAX（XMLHttpRequest + FormData））を試してください。これにより、非同期要求を実行し、応答の表示方法をより適切に制御できます。

さらにシンプルにしたい場合は、jQueryの $.ajax 関数（また$.getおよび$.post）。シンプルなJSオブジェクトを使用してデータを送信します。

0
byeolbit.99

Jqueryを使用する場合、.click（）イベントでコンテンツを送信できます（つまり、「保存」または「送信」...）

クリック関数で、ajax "post"を使用してサーバー側のスクリプトに投稿し、データベースに挿入します。

例

0
Sparkup