-3

我在循环中有一个注释文本框，我需要应用一些jQuery函数。

  1. 我需要根据输入的文本调整文本框的大小。
  2. 我需要检查文本的长度。我不希望用户输入超过 100 个字符。
  3. 我需要用户能够按 Enter 并提交评论。
  4. 我还需要在不离开页面的情况下提交表单。

我知道如何单独完成所有功能。我想将所有功能合二为一。这是我所拥有的：

<?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 Demo。

我首先修改了您的 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()
});
​

第一部分将创建插件。我建议重命名它，使其不使用 name myPlugin。该插件将按键事件绑定到文本区域并执行您的各种操作。

第二部分定位所有 textarea 元素并为每个 textarea 初始化插件。

注意： 我没有为您编写所有代码来提交表单。如果您需要这方面的帮助，我建议您在此处创建另一个帖子，专门寻求帮助。

于 2012-12-20T19:42:27.007 回答