0

フォームのテキスト入力の束を組み込み、フォームからの入力を使用してフォームの下のテキスト領域を更新する方法を探しています。テキスト領域は、電子メールの署名に埋め込む HTML コードのチャンクになります。

たとえば、ユーザーは自分の名前と詳細をフォームに入力し、送信ボタンをクリックすると、電子メールの署名に使用する HTML コードが生成されます。

フォームの場合、次のようなものがあります。

<label for="EmployeeName">Full name:</label>
<input id="EmployeeName" type="text" maxlength="30" size="20"/>

しかし、フォームの値を使用して下のテキスト フィールドを更新する方法がわかりません。今日はかなりの時間をこのトピックの調査に費やしましたが、何も得られないようです。どんな助けでも大歓迎です。

4

3 に答える 3

1

このようなものには、図書館がいいかもしれません。個人的にはKnockoutをお勧めしますが、好みは人それぞれです。これが私が行う方法です（必ずしもあなたにとって最良の方法ではありません）。

デモ

HTML はほとんど同じで、テンプレートが追加されているだけです。主な違いは、data-bind表示するデータを要素に伝える属性です。キーは、 （の反対）ではなく、のvalueUpdate後に変数を更新することを示しています。 keydownblurfocus

<div>
<label for="EmployeeName">Full name:</label>
<input id="EmployeeName" type="text" maxlength="30" size="20" 
    data-bind="value: EmployeeName, valueUpdate: 'afterkeydown'" />
<label for="XYZ">A Label:</label>
<input id="XYZ" type="text" maxlength="30" size="20" 
    data-bind="value: XYZ, valueUpdate: 'afterkeydown'" />
</div>

<textarea disabled rows=20 data-bind="value: Email"></textarea>

<script type="text/html" id="signatureTemplate">
<h2>EmployeeName</h2>
<h2>XYZ</h2>
<h3>Company</h3>
<h3>My Position</h3>
</script>

これらのdata-bind値は JavaScript と一致し、ユーザーが文字を入力するたびに更新されます。Web サイトでKnockout を学習するか、必要に応じてこのコードを変更してください。

var SignatureGenerator = function(){
    var self = this;

    self.EmployeeName = ko.observable('');
    self.XYZ = ko.observable('');

    self.Email = ko.computed(function(){
        return document.getElementById("signatureTemplate").innerHTML
        .replace("EmployeeName", self.EmployeeName());
        .replace("XYZ", self.XYZ());
    });
}

ko.applyBindings(window.app = new SignatureGenerator());
于 2013-07-08T22:25:08.623 に答える
0

これがあなたの言いたいことかどうかはわかりませんが、これは解決策になる可能性があります：

$('#done').click(function(e){
    e.preventDefault();
    var tag = "<p>";
    var split = tag.substring(1);
    $('#res').val(tag+$('#EmployeeName').val()+'</'+split);
});

HTML の場所:

<label for="EmployeeName">Full name:</label>
<input id="EmployeeName" type="text" maxlength="30" size="20"/>
<button id="done">Done</button>
<textarea id="res"></textarea>

ここでチェックしてください：フィドル

コードは基本的に言っています：

  • $('#done').clickボタンのクリックで
  • e.preventDefault();フォームを送信するという通常のアクションを実行するのではなく、私が言うことを実行してください。
  • var tag = "<p>"追加するタグを選択します (段落)
  • var split = tag.substring(1);最初のものを削除して、<後でスラッシュを追加できるようにします
  • $('#res').val(かっこ内にあるものの id res に値を与えます。wichi はタグ、入力、</および分割です。tag+$('#EmployeeName').val()+'</'+split
于 2013-07-08T22:18:49.137 に答える
0

質問を理解しているかどうかは完全にはわかりませんが、これが私が思いついたものです（jQueryを使用）：

// when the go button is clicked
$('#action').click(function() {
    // build up some html based on the input values
   var html = '<h1>' + $('#EmployeeName').val() + '</h1>'
   html += '<h2>' + $('#EmployeeSurname').val() + '</h2>'
   // set it in the textarea
   $('#result').html(html);
});

オンラインに関するドキュメントを見つけるのはそれほど難しくないはずです...

デモ用に小さなフィドルをセットアップしました: http://jsfiddle.net/jQ2Ya/

于 2013-07-08T22:21:09.137 に答える