我实现了一个表单文本字段字符计数器,它可以在 jsfiddle 中工作,但不能在应用程序中工作。它会出现,但不会像在 jsfiddle 中那样实时计数。当我重新加载页面时,它将计算文本字段中的当前字符。
我的页面中确实有更多的 javascript,但我尝试通过删除所有其他 java 而不是 coutner 来测试它,但它仍然无法工作。
同样奇怪的是我有一个
最小长度:20,最大长度: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 应用程序中运行吗?实时
最佳答案
首先,浏览器检查工具中是否有错误消息?您是否安装了 gem 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()。您可以使用 关闭事件监听器$(".message").off()
有点过度分享,但是了解事件监听器和事件委托(delegate)对于编写优秀的 jQuery 至关重要。
关于javascript - form_for 表单的字符计数器未实时更新计数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54228120/