JQuery计数器限制不适用于WP注释文本区域

时间：2018-01-26 作者：samar

我想在wordpress注释中为textarea实现JQuery计数器限制。php

Note 1:JQuery计数器限制代码本身正在工作。https://jsfiddle.net/samarpw/5yosLhvo/ .如何使用注释实现此JQuery代码。注释2中的php代码。

Note 2:而我的评论。php模板也可以很好地处理我的主题。下面是上面的JQuery计数器限制代码应该适用的文本区域。

<div id="commentform" class="c-form">
<?php
global $aria_req;
$comments_args = array(
    \'title_reply\'          =>\'<h4><span>\'.__(\'Add Comment\', \'MyTheme\' ).\'</span></h4>\',
    \'comment_notes_before\' => \'\',
    \'comment_notes_after\'  => \'\',
    \'label_submit\'         => __( \'Post Comment\', \'MyTheme\' ),
    \'comment_field\'        => \'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="\'.__(\'Comment Description *\', \'MyTheme\' ).\'"></textarea></p>\',
    \'fields\'               => apply_filters( \'comment_form_default_fields\', 
        array(
            \'author\' => \'<p class="comment-form-author">\'
            .( $req ? \'\' : \'\' ).\'<input id="author" name="author" type="text" aria-required="true" placeholder="\'.__(\'Name *\', \'MyTheme\' ).\'" value="\'.esc_attr( $commenter[\'comment_author\'] ) . \'" size="30"\' . $aria_req . \' /></p>\',
            \'email\'  => \'<p class="comment-form-email">\'
            .($req ? \'\' : \'\' ) . \'<input id="email" name="email" type="text" aria-required="true" placeholder="\'.__(\'Email *\', \'MyTheme\' ).\'" value="\' . esc_attr(  $commenter[\'comment_author_email\'] ).\'" size="30"\'.$aria_req.\' /></p>\',
        ) 
    )
); 
comment_form($comments_args); ?>
</div>
我的实施代码https://ideone.com/yFIXG3.您的指南（&A）；我们将不胜感激。我会感谢你的。

1 个回复
最合适的回答,由SO网友:Anson W Han 整理而成

您的代码中似乎有两个错误，如注释中所示（并粘贴在下面）。

您将脚本标记连接到comment\\u字段数组值中，而没有将其封装为字符串（引号中）。理想情况下，限制器函数的声明应该位于comments_args 正在传递给的数组comment_form 作用或者，可以通过将jquery计数器库添加到主题的函数中，将其加载到标记中。php（使用wp_enqueue_script)"text" 而不是"comment" 在“注释字段”数组键中设置。我建议在文档完全加载/准备就绪后调用它为了便于参考，我复制并粘贴了您在评论中共享的代码（重新格式化以提高可读性），并发布了可能需要的编辑：

共享的实现(https://ideone.com/yFIXG3):

<div id="commentform" class="c-box">
  <?php global $aria_req; $comments_args = array(
\'title_reply\'=>\'<h4><span>\'.__(\'Add Comment\', \'MyTheme\' ).\'</span></h4>\',
\'comment_notes_before\' => \'\',
\'comment_notes_after\' => \'\',
\'label_submit\' => __( \'Post Comment\', \'MyTheme\' ),
\'comment_field\' => \'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="\'.__(\'Comment Description *\', \'MyTheme\' ).\'"></textarea>\'.<script>
(function ($) {
$.fn.extend({
limiter: function (minLimit, maxLimit, elem) {
$(this).on("keydown keyup focus keypress", function (e) {
setCount(this, elem, e);
});
function setCount(src, elem, e) {
var chars = src.value.length;
if (chars == maxLimit) {
//e.preventDefault();
elem.html(maxLimit - chars);
elem.addClass("maxLimit");
return false;
} else if (chars > maxLimit) {
src.value = src.value.substr(0, maxLimit);
chars = maxLimit;
elem.addClass("maxLimit");
} else {
elem.removeClass("maxLimit");
}
if (chars < minLimit) {
elem.addClass("minLimit");
} else {
elem.removeClass("minLimit");
}
elem.html(maxLimit - chars);
}
setCount($(this)[0], elem);
}
});
})(jQuery);
var elem = $("#chars");
$("#text").limiter(35, 200, elem);
</script>.\'</p>\',
\'fields\' => apply_filters( \'comment_form_default_fields\',
array(
\'author\' => \'<p class="comment-form-author">\'
.( $req ? \'\' : \'\' ).\'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="\'.__(\'Name *\', \'MyTheme\' ).\'" value="\'.esc_attr( $commenter[\'comment_author\'] ) . \'" size="30"\' . $aria_req . \' /></p>\',
\'email\' => \'<p class="comment-form-email">\'
.($req ? \'\' : \'\' ) . \'<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="\'.__(\'Email *\', \'MyTheme\' ).\'" value="\' . esc_attr(  $commenter[\'comment_author_email\'] ).\'" size="30"\'.$aria_req.\' /></p>\',
\'url\' => \'<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="\'.__(\'Website\', \'MyTheme\' ).\'" value="\' . esc_url( $commenter[\'comment_author_url\'] ) . \'" size="30" /></p>\'
) 
)
); 
comment_form($comments_args); ?>
</div>
您的实现已共享，但已格式化：

<div class="c-box" id="commentform">
    <?php 
        global $aria_req; 
        $comments_args = array(
            \'title_reply\' =>
                \'<h4><span>\'.__(\'Add Comment\', \'MyTheme\' ).\'</span></h4>\',
            \'comment_notes_before\' => 
                \'\',
            \'comment_notes_after\' => 
                \'\',
            \'label_submit\' => 
                __( \'Post Comment\', \'MyTheme\' ),
            \'comment_field\' => 
                \'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="\'.__(\'Comment Description *\', \'MyTheme\' ).\'"></textarea>\'.
                <script>
                (function($) {
                    $.fn.extend({
                        limiter: function(minLimit, maxLimit, elem) {
                            $(this).on("keydown keyup focus keypress", function(e) {
                                setCount(this, elem, e);
                            });

                            function setCount(src, elem, e) {
                                var chars = src.value.length;
                                if (chars == maxLimit) {
                                    //e.preventDefault();
                                    elem.html(maxLimit - chars);
                                    elem.addClass("maxLimit");
                                    return false;
                                } else if (chars > maxLimit) {
                                    src.value = src.value.substr(0, maxLimit);
                                    chars = maxLimit;
                                    elem.addClass("maxLimit");
                                } else {
                                    elem.removeClass("maxLimit");
                                }
                                if (chars < minLimit) {
                                    elem.addClass("minLimit");
                                } else {
                                    elem.removeClass("minLimit");
                                }
                                elem.html(maxLimit - chars);
                            }
                            setCount($(this)[0], elem);
                        }
                    });
                })(jQuery);
                var elem = $("#chars");
                $("#text").limiter(35, 200, elem);
                </script>
                .\'</p>\',
            \'fields\' => 
                apply_filters( \'comment_form_default_fields\',
                    array(
                        \'author\' => 
                            \'<p class="comment-form-author">\'.( $req ? \'\' : \'\' ).\'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="\'.__(\'Name *\', \'MyTheme\' ).\'" value="\'.esc_attr( $commenter[\'comment_author\'] ) . \'" size="30"\' . $aria_req . \' /></p>\',
                        \'email\' => 
                            \'<p class="comment-form-email">\'.($req ? \'\' : \'\' ) . \'<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="\'.__(\'Email *\', \'MyTheme\' ).\'" value="\' . esc_attr(  $commenter[\'comment_author_email\'] ).\'" size="30"\'.$aria_req.\' /></p>\',
                        \'url\' => 
                            \'<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="\'.__(\'Website\', \'MyTheme\' ).\'" value="\' . esc_url( $commenter[\'comment_author_url\'] ) . \'" size="30" /></p>\'
                    ) 
                )
        ); 
        comment_form($comments_args); 
    ?>
</div>
建议调整：

<div class="c-box" id="commentform">
<?php 
    global $aria_req; 
    $comments_args = array(
        \'title_reply\' => 
            \'<h4><span>\'.__(\'Add Comment\', \'MyTheme\' ).\'</span></h4>\',
        \'comment_notes_before\' => 
            \'\',
        \'comment_notes_after\' => 
            \'\',
        \'label_submit\' => 
            __( \'Post Comment\', \'MyTheme\' ),
        \'comment_field\' => 
            \'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="\'.__(\'Comment Description *\', \'MyTheme\' ).\'"></textarea></p>\',
        \'fields\' => 
            apply_filters( \'comment_form_default_fields\',
                array(
                \'author\' =>
                    \'<p class="comment-form-author">\'.( $req ? \'\' : \'\' ).\'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="\'.__(\'Name *\', \'MyTheme\' ).\'" value="\'.esc_attr( $commenter[\'comment_author\'] ) . \'" size="30"\' . $aria_req . \' /></p>\',
                \'email\' => 
                    \'<p class="comment-form-email">\'.($req ? \'\' : \'\' ) . \'<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="\'.__(\'Email *\', \'MyTheme\' ).\'" value="\' . esc_attr(  $commenter[\'comment_author_email\'] ).\'" size="30"\'.$aria_req.\' /></p>\',
                \'url\' => 
                    \'<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="\'.__(\'Website\', \'MyTheme\' ).\'" value="\' . esc_url( $commenter[\'comment_author_url\'] ) . \'" size="30" /></p>\'
                ) 
            )
    ); 
    comment_form($comments_args); 
?>

<script>
(function($) {
    $.fn.extend({
        limiter: function(minLimit, maxLimit, elem) {
            $(this).on("keydown keyup focus keypress", function(e) {
                setCount(this, elem, e);
            });

            function setCount(src, elem, e) {
                var chars = src.value.length;
                if (chars == maxLimit) {
                    //e.preventDefault();
                    elem.html(maxLimit - chars);
                    elem.addClass("maxLimit");
                    return false;
                } else if (chars > maxLimit) {
                    src.value = src.value.substr(0, maxLimit);
                    chars = maxLimit;
                    elem.addClass("maxLimit");
                } else {
                    elem.removeClass("maxLimit");
                }
                if (chars < minLimit) {
                    elem.addClass("minLimit");
                } else {
                    elem.removeClass("minLimit");
                }
                elem.html(maxLimit - chars);
            }
            setCount($(this)[0], elem);
        }
    });
    $(document).ready(function() {
        var elem = $("#chars");
        $("#comment").limiter(35, 200, elem);
    });
})(jQuery);
</script>

</div><!--/#commentform-->

结束
标签： jquery   comments   forms   小码农  

相关推荐

成功将商品添加到购物车后，使用自定义事件侦听器执行jQuery

这是我的第一篇帖子，所以请温柔一点。在使用以下代码更新商品数量（Ajax）后，我已经在woocommerce购物车页面中成功执行了一些jQuery代码：$( document.body ).on( \'updated_cart_totals\', function(){ //re-do your jquery }); 我还需要一个类似的函数来在cart页面中添加交叉销售项目（单击ajax\\u add\\u to\\u cart\\u按钮）后执行jQuery代码。到目前为