Question

我正在尝试以编程方式在表单中的文本区域之后添加div。 div包含一个简单的计数器，用于指示用户在textarea中键入时要使用的字符数。这是javascript代码：

    $(document).ready(function () {
        $.ors = {
            desc: {
                maxlen: 5000,
                curlen: 0
            }
        }
        $('#txtDesc').ready(function () {
            $(this).after('<div><span id="' + $(this).attr('id') + '_counter">' + $('#txtDesc').data('maxlen') + '</span> characters remaining</div>');
        }).on('keyup', function () {
            $.ors.desc.curlen = $(this).val().length;
            $('#' + $(this).attr('id') + '_counter').html($.ors.desc.maxlen - $.ors.desc.curlen);
        });
    });

（注意：我理解在javascript中使用$ .ors.desc.maxlen然后在textarea中使用data-maxlen是多余的，它仍在开发中，所以这就是为什么我包括两者。最终还会有其他需要$ .ors对象信息的函数。）

textarea的HTML很简单：

        <textarea name="txtDesc" id="txtDesc" tabindex="2" data-maxlen="5000"></textarea>

问题是如果我按上面那样运行它会出现以下错误：

“Javascript运行时错误：无法获取未定义或空引用的属性'createDocumentFragment'”

我将电话改为以下：

        $('#txtDesc').after('<div><span id="' + $(this).attr('id') + '_counter">' + $(this).data('maxlen') + '</span> characters remaining</div>').on('keyup', function () {
            $.ors.desc.curlen = $(this).val().length;
            $('#' + $(this).attr('id') + '_counter').html($.ors.desc.maxlen - $.ors.desc.curlen);
        });

但是我得到了未定义的值而不是5000.没有任何工作表明$（this）没有按照我的预期工作。

如果我将Javascript改为以下版本，它可以正常工作，但是它被锁定到特定的textarea并且我不能将它用作函数：

        $('#txtDesc').after('<div><span id="txtDesc_counter">' + $('#txtDesc').data('maxlen') + '</span> characters remaining</div>').on('keyup', function () {
            $.ors.desc.curlen = $(this).val().length;
            $('#' + $(this).attr('id') + '_counter').html($.ors.desc.maxlen - $.ors.desc.curlen);
        });

任何人都知道我错过了什么？

Answer 1

以下是jsFiddle示例：

http://jsfiddle.net/S24Vr/

<textarea>Sample</textarea>

jQuery ("<div><p>I am a p inside div</p></div>").    insertAfter ("textarea");

使其可用作功能

<textarea onclick="sample ()">Sample</textarea>


sample = function () {
jQuery ("<div><p>I am a p inside div</p></div>").    insertAfter ("textarea");
}

我不明白你到底错过了什么。

我更新了jsFiddle：http://jsfiddle.net/S24Vr/

Answer 2

试试这个：http://jsfiddle.net/aamir/S24Vr/2/

HTML：

<textarea></textarea>

JS：

$('textarea')
    .after('<div class="counter"></div>')
    .keyup(function () {
        $('.counter').html($(this).val().length + ' chars typed')
    });

Answer 3

保持代码可以像http://jsfiddle.net/daguru/9PY8T/2/

那样执行

 <textarea name="txtDesc" id="txtDesc" tabindex="2" data-maxlen="5000"></textarea>

    $.ors = {
         desc: {
             maxlen: 5000,
             curlen: 0
         }
     }

    $('textarea').

         after('<div id="infos"><span id="counter">' +              
         $('textarea').data('maxlen') + '</span> characters remaining</div>').

         keyup( function() {
             $("#infos").show();    
             $.ors.desc.curlen = $(this).val().length;
             $('#counter').html($.ors.desc.maxlen-$.ors.desc.curlen);
    });

使用jQuery将div附加到textarea

3 个答案: