Question

我找到了一个jquery代码片段，用于在键入表单时对字符进行倒计时。我已经尝试将它添加到我的application.js文件，但它无法正常工作。当我输入textarea时，数字350不会改变。

我已经安装了jquery-rails，我使用＆lt;％= javascript_include_tag：all％＆gt;所以这不应该是问题。这是我在application.js中的内容

$('textarea').keyup(function(){
    ta = $(this);
    if(ta.val().length >= 350){
        ta.val( ta.val().substr(0, 350) );
    } else {
        $("#counter span").text(350-ta.val().length);
    }
});

setInterval('$("#counter span").text(350-ta.val().length);', 350);

在我看来，我有：

<%= form_for @post, :validate => true, :html => {:multipart => true} do |f| %>
  <%= render 'shared/error_messages', :object => f.object %>
    <div class="field">
      <%= f.label :title, 'Title:' %><br /> 
    <%= f.text_field :title %><br />
    <%= f.label :image, "Choose image"%><br />
    <%= image_tag(@post.image_url(:avatartiny).to_s) if @post.image? %>
    <%= f.file_field :image %>
    <%= f.hidden_field :image_cache %><br />
    <%= f.label :content %><br /> 
    <%= f.text_area :content %><br />
    <div id="counter"><span>350</span> characters remaining.</div>
   </div>
  <div class="actions">
    <%= f.submit "Submit" %>
  </div>
<% end %>

在我的custom.css中，我有：

textarea {
   width:400px;
   height:400px;
   border:1px solid #999;
   border-radius:3px;
   padding:7px;
}

#counter span { font-weight:700 }

以下是我的html来源：

    <form accept-charset="UTF-8" action="/posts" class="new_post" data-validate="true" 
enctype="multipart/form-data" id="new_post" method="post" novalidate="novalidate"><div 
style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input
 name="authenticity_token" type="hidden" value="V6J0VERvuoKvQ5kXXgBuU5aC6VsKQ7W6RF30IKy9D7E="/></div>

<div class="field">
      <label for="post_title">Title:</label><br /> 
<input data-validate="true" id="post_title" name="post[title]" size="30" type="text" /><br />
<label for="post_image">Choose image</label><br />

<input data-validate="true" id="post_image" name="post[image]" type="file" />
<input id="post_image_cache" name="post[image_cache]" type="hidden" /><br />
<label for="post_content">Content</label><br /> 
<textarea cols="40" id="post_content" name="post[content]" rows="20"></textarea><br />
<div id="counter"><span>350</span> characters remaining.</div>
</div>

Answer 1

将textarea绑定包装在document.ready binding：

中

$(function() {
    $('textarea').keyup(function(){
        ta = $(this);
        if(ta.val().length >= 350){
            ta.val( ta.val().substr(0, 350) );
        } else {
            $("#counter span").text(350-ta.val().length);
        }
    }); 
});

这有用吗？

Answer 2

your javascript没有错，所以也许可以尝试将代码放在

中

$(document).ready(function(){

});

块。

Rails 3：无法在我的表单上运行此jquery

2 个答案: