Question

我实现了一个表单text_field字符计数器，该计数器在jsfiddle中有效，但在应用程序中无效。它会出现，但不会像jsfiddle中那样实时计数。当我重新加载页面时，它将计算text_field中的当前字符。

我的页面中确实有更多的JavaScript，但是我尝试通过删除所有其他Java而不是coutner进行测试，但这仍然无法正常工作。

奇怪的是我有一个

minlength: 20, maxlength: 1000

如果未通过验证，则会显示一个带有计数的切换，并将实时计数，直到达到最小长度为止。我的目标是将该计数器转换为text_field下的内容，以便它始终显示/计数字符

这是我的代码：

<%= form.label :description %>
<%= form.text_area :description, class: "form-control message", :rows => 10, minlength: 20, maxlength: 1000, required: true    %>
<span class="countdown"></span>

jQuery：

  jQuery(document).ready(function ($) {
    updateCountdownAll();
    $('.message').live('input', updateCountdown);

    });

    function updateCountdownAll() {
        $('.message').each(function () {
            updateCountdown(this);
        });
    }

    function updateCountdown(e) {

        var currentElement;
        if (e.target) {
            currentElement = e.target;
        } else {
            currentElement = e;
        }

        var maxLengh = $(currentElement).attr('maxlength');
        var remaining = $(currentElement).val().length;
        $(currentElement).nextAll('.countdown:first').text(remaining + '/' + maxLengh);
    }

JSFiddle： http://jsfiddle.net/4bozw3k5/

我可以对代码进行任何处理以使其在Rails应用程序中工作吗？实时

Answer 1

首先，浏览器检查工具中是否有任何错误消息？如果没有安装宝石jquery-rails，请访问下面的链接并安装它。

https://rubygems.org/gems/jquery-rails/versions/4.3.1

第二，可能是因为。live()已被贬值，并且根据1.9版本已完全删除。

尝试使用事件处理程序.on()。

第三，这是很多代码，在一些意大利面条代码旁接了一些非常简单的东西。我会做些什么来简化它：

    $(".message").on("keyup", function () {
        var maxlength = $(this).attr("maxlength")
        var remaining = $(this).val().length
        $(this).next().text(remaining + '/' + maxLengh)
    })

无需将其包装在$（document）.ready（）中，刷新应用程序时，过多的$（document）.ready（）会减慢加载时间（通过增加脚本时间）。根据您将Rails应用设置为执行javascript的方式，您可以将所有javascript / jquery包装在一个大的$（document）.ready（）中，而不是执行一次一次刷新应用程序时。

此外，.on（）是事件侦听器，它正在侦听并等待发生的事情，例如.on（“ keyup”，function（）。您可以使用{{1关闭事件侦听器}}

有点过度共享，但是知道事件监听器和事件委托对于编写好的jQuery非常重要。

form_for表单的字符计数器无法实时更新计数

1 个答案: