-3

いくつかのjQuery関数を適用する必要があるループにコメント テキスト ボックスがあります。

  1. 入力したテキストに従ってテキスト ボックスのサイズを変更する必要があります。
  2. テキストの長さを確認する必要があります。ユーザーに 100 文字を超えて入力させたくありません。
  3. ユーザーがEnterキーを押してコメントを送信できるようにする必要があります。
  4. また、ページを離れずにフォームを送信する必要があります。

すべての機能を個別に実行する方法を知っています。すべての機能を 1 つにまとめたいと考えています。ここに私が持っているものがあります:

<?php
    $i = 0; //For the id of the textarea

    while (/* Retrieve information from the database */)
    {
        $th_id = $row['th_id']; //id for the original comment/post.

        echo "<form method='post'>
        <input type='hidden' name='cb_id' value='".$th_id."' >
        <textarea onkeyup='addcom()'
                  onkeydown='addcom()'
                  placeholder='Press enter to comment'>
        </form>;
    }
?>

JavaScript コードは次のとおりです。

<script type="text/javascript">
    <!--
        function addcom()
        {
            var ch,l;
            ch = $('.addcom').val();
            l = ch.length;

            if (l == 30)
            {
                $('.addcom').css({'height':'40px'});
            }
            //More code until maximum number of characters is reached
            else if(l >= 100)
            {
                ch = ch.substring(0, 100);
                $('.addcom').val(ch);
            }
        }
    -->
</script>

テキストフィールドと非表示の入力フィールドの情報を取得するにはどうすればよいですか? また、キーコード 13 が押された場合にフォームが送信されるというイベントをトリガーするにはどうすればよいですか?

(上記の JavaScript コードは、予想どおり、ループ内のすべてのテキスト領域を変更しています。)

4

1 に答える 1

2

テキストボックス用のjQueryプラグインを作成します。

(function($) {
    $.fn.myPlugin = function() {
        var txt = $(this);
        txt.on("keypress", function(event){
            // resize the text box according to the current value
            // if it is more than 100 characters get a substring of the first 100 characters
            // if the key press in the event is enter then submit the form using ajax
        });
    };
})( jQuery );

次に、元のループで、このプラグインをテキストボックスにアタッチできます。

var arrTextBoxes = [...];
for (var i = 0; i < arrTextBoxes.length; i++) 
{
    arrTextBoxes[i].myPlugin();
}

ここではコードをテストしていませんが、前提は健全です。この種のことをたくさん行う場合は、jQuery UIと呼ばれる別のjQueryプラグインがあります。これは、フレームワークを使用して再利用可能なウィジェット（または拡張可能なプラグイン）を作成するのに最適なウィジェットファクトリを備えています。

編集

プラグインのJSFiddleデモを作成しました。

まず、HTMLを変更し、onkeyupイベントとonkeydownイベントを削除しました。

古いHTML：

<textarea onkeyup="addcom(e)" onkeydown="addcom(e)" class="com" placeholder="Press enter to submit"></textarea>

新しいHTML：

<textarea class="com" placeholder="Press enter to submit"></textarea>

次に、次のjqueryコードを作成しました。

(function($) {
    $.fn.myPlugin = function() {
        var txt = $(this);
        txt.on("keypress", function(event){

            // resize the text box according to the current value
            var l = txt.val().length;
            if(l < 30)
                txt.css("height", "20px");
            else if(l == 30)
                txt.css("height", "40px");
            else if(l == 60)
                txt.css("height", "60px");
            else if(l == 90)
                txt.css("height", "80px");

            // if it is more than 100 characters get a substring of the first 100 characters
            if(l >= 100)
                txt.val(txt.val().substring(0, 100));

            // if the key press in the event is enter then submit the form using ajax
            if(event.which == 13) {
                // Use $.get() or $.post() or $.ajax() to submit the form
            }
        });
    };
})( jQuery );

$("textarea.com").each(function(){
    $(this).myPlugin()
});
​

最初のセクションでプラグインを作成します。名前を使用しないように名前を変更することをお勧めしますmyPlugin。プラグインは、keypressイベントをtextareaにバインドし、さまざまなアクションを実行します。

2番目のセクションでは、すべてのtextarea要素を検索し、各textareaのプラグインを初期化します。

注： フォームの送信を行うためのすべてのコードを記述したわけではありません。それについてサポートが必要な場合は、ここに別の投稿を作成して、特にサポートを求めることをお勧めします。

于 2012-12-20T19:42:27.007 に答える