0

在完成 Railstutorial（第 10 章）的练习时，我使用 Jquery 来计算 Textarea 中的剩余字符。它实际上有效，但仅当我每次登录至少刷新一次页面时。这意味着查询不会执行，直到每次登录后刷新一次页面并且在它完美运行之后刷新一次。我已将 css 用于 .countdown 方法。

所以，我的问题是..为什么需要我刷新页面才能看到页面上的剩余字符，还有一些更好的方法。有人可以建议我这里发生了什么吗？

CSS代码

 .countdown {
  display: inline;
  padding-left: 10px;
  color: #338333;
}

这是 micropost.js.coffee 的代码

updateCountdown = -> 
  remaining = 140 - jQuery("#micropost_content").val().length
  jQuery(".countdown").text remaining + " characters remaining"


jQuery ->
  updateCountdown()
  $("#micropost_content").change updateCountdown
  $("#micropost_content").keyup updateCountdown

这是 _micropost_form.html.erb 的内容

<%= form_for(@micropost) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Maximum characters: 140" %>    

  </div>
  <%= f.submit "Post", class: "btn btn-large btn-primary" %>
  <span class="countdown"></span>
<% end %>

这是我登录并转到主页时的图像（不刷新页面）

未经刷新的页面视图

这是我登录时的图像，转到主页并刷新页面

在此处输入图像描述

4

2 回答 2

2

尝试这个。

$(document).ready(function(){
    var totalChars      = 100; //Total characters allowed in textarea
    var countTextBox    = $('#counttextarea') // Textarea input box
    var charsCountEl    = $('#countchars'); // Remaining chars count will be displayed here

    charsCountEl.text(totalChars); //initial value of countchars element
    countTextBox.keyup(function() { //user releases a key on the keyboard
        var thisChars = this.value.replace(/{.*}/g, '').length; //get chars count in textarea
        if(thisChars > totalChars) //if we have more chars than it should be
        {
            var CharsToDel = (thisChars-totalChars); // total extra chars to delete
            this.value = this.value.substring(0,this.value.length-CharsToDel); //remove excess chars from textarea
        }else{
            charsCountEl.text( totalChars - thisChars ); //count remaining chars
        }
    });
});

这是一个小提琴http://jsfiddle.net/6C8zn/

于 2014-07-08T10:07:52.290 回答
0

更新

最后我意识到为了让这个反例工作而将Turbolinks全部删除是一个错误的决定。用与Turbolinks配合得很好的代码更新我的答案。从这里生成了一个咖啡脚本版本：http: //js2.coffee/

ready = undefined

ready = ->
  totalChars = 100
  #Total characters allowed in textarea
  countTextBox = $('#textareabox')
  # Textarea input box
  charsCountEl = $('#countchars')
  # Remaining chars count will be displayed here
  charsCountEl.text totalChars
  #initial value of countchars element
  countTextBox.keyup ->
    #user releases a key on the keyboard
    thisChars = @value.replace(/{.*}/g, '').length
    #get chars count in textarea
    if thisChars > totalChars
      CharsToDel = thisChars - totalChars
      # total extra chars to delete
      @value = @value.substring(0, @value.length - CharsToDel)
      #remove excess chars from textarea
    else
      charsCountEl.text totalChars - thisChars
      #count remaining chars
    return
  return

$(document).ready ready
$(document).on 'page:load', ready
# Loads javascript while loading page

在看到这么多关于 jQuery 和 JavaScript 的帖子后终于得到了我的答案......在这里在主页上添加一个 JavaScript jquery-micropost char counter here character-countdown-like-twitter ...

但是没有一个适用于 Rails 4.0，因为它是turbolinks的问题。

感谢“Lan”（用户：288863）......他的解决方案成功了......

实际上，我们可以简单地通过删除app/asset/javascript/application.js文件中的“ //= require turbolinks ”来解决这个问题 。然后完成。

另一种方法是使用 "jquery.turbolinks" ，我发现这个 gem 有一些问题，所以我建议删除 turbolinks 行，此外你可以看到这篇文章，其中解释了相同问题的答案。由用户 Lan 回答您只需要在完成该帖子的每一步后重新启动即可。

于 2013-10-17T17:37:17.343 回答