3

私は小さなWebアプリに取り組んでおり、その一部として、％name％や％slogan％などの識別子をJeremyやInterface Designerなどの実際の値で上書きして、テキスト領域のコードを編集するためのフォームを取得する必要があります。

これが私が今持っているコードです。ロード時にすべての値を指定されたテキストに変更するだけですが、ユーザーがフォームを送信して入力フィールドにテキストを入力した後で変更したいと思います。

$(document).ready(function() {
    $('textarea').each(function(index, element) {
       var textarea = $(element);
       textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
    });
});

jQueryで実行する必要があります。

あなたがそれをコーディングできるかどうか私に知らせてください。

4

4 に答える 4

1

document.readyの代わりにフォーム送信イベントを使用してください

$(document).ready(function() {
    $('#formId').submit(function() {
        $('textarea').each(function(index, element) {
           var textarea = $(element);
           textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
        });
    });
});
于 2013-03-02T12:54:23.097 に答える
1

コメントで提供したWebサイトに基づいて、スクリプトをニーズと要素に適合させました。

disabled="disabled"ユーザーがコンテンツを選択できるが編集できないように、最終的なコードテキストエリアに設定することをお勧めします

<form method="get">
    <label for="name">Name: <input type="text" id="name" placeholder="Victor Erixon"/></label><br/>
    <label for="slogan">Slogan: <input type="text" id="slogan" placeholder="Interface Designer"/></label><br/>
    <label for="bio">Bio: </label><br>
    <textarea id="bio" placeholder="Write something about yourself"></textarea><br/>
    <label for="favicon">Favicon: <input type="text" id="favicon" placeholder="http://www.gravatar.com/avatar/b20f810469b0.png"/></label><br/>
    <label for="dribble">Dribble: <input type="text" id="dribble" placeholder="victorerixon"/></label><br/>
    <textarea class="code" disabled="disabled"></textarea><br/>
    <input type="submit" value="Submit"/>
</form>

var basicHtml = '<html>\n   <head>\n        <title>%name%</title>\n     <meta name="description" content="%bio%">\n     <link rel="icon" href="%favicon%">\n    </head>\n   <body>\n        <h1>%name%</h1>\n       <h2>%slogan%</h2>\n     <ul id="portfolio">%dribbble%</ul>\n        <p class="about">%bio%</p>\n    </body>\n</html>';

$(document).ready(function(){
    $('.code').val(basicHtml);

    $('form').on('submit',function() {
        var content = basicHtml;
        content = content.replace(/%name%/g, ($('#name').val()||$('#name').attr('placeholder')));
        content = content.replace(/%slogan%/g, ($('#slogan').val()||$('#slogan').attr('placeholder')));
        content = content.replace(/%bio%/g, ($('#bio').val()||$('#bio').attr('placeholder')));
        content = content.replace(/%favicon%/g, ($('#favicon').val()||$('#favicon').attr('placeholder')));
        var final = content.replace(/%dribble%/g, ($('#dribble').val()||$('#dribble').attr('placeholder')));
        $('.code').val(final);
        
        return false;
    }).on('reset',function(){
        $('form textarea:not(.code),form input').val();
        $('.code').val(basicHtml);
    });
});

JSFIDDLE

を定義する必要はありませんbasicHtml：

常に次のようにtextareaのコードを記述する必要があります:(開始/終了<html>と<textarea>タグの間にスペースやタブはありません）

<textarea class="code" disabled="disabled"><html>
    <!-- rest of the code -->
</html></textarea>

コードを次のように変更します。

$(document).ready(function(){
    var basicHtml = ($('.code').html()).replace(/&lt;/g,'<').replace(/&gt;/g,'>');
    
    //rest of code
});

JSFIDDLE

于 2013-03-02T13:01:33.783 に答える
0
  1. フォーム送信を使用しないでください。ただし、送信ボタンのonclickをjavascript関数に向けてください。
  2. 呼び出されたばかりの関数を使用して入力フィールドを検証します
  3. 呼び出された関数を使用して、コードが示すように置換を行います。
于 2013-03-02T12:53:52.857 に答える
0

form.submitイベントでコードを実行してみてください。

$(document).ready(function() {
   $('form').on('submit', function() {
        $('textarea').each(function(index, element) {
            var textarea = $(element);
            textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
        });
   }); 
});
于 2013-03-02T12:55:32.213 に答える