simple_form으로 text 또는 textarea의 입력 필드에 입력 문자 수를 표시합니다.

simple_form 에서 text나 textarea 의 입력 필드에의 입력 문자수를 표시하는 예를 만들어 보았습니다.



전체 코드는 아래에.
htps : // 기주 b. 코 m / 발뒤꿈치 y / 라이 ls3 - 아소시 아치 온 s

방법 개요:
* simple_form의 input 태그에서 :help => "_"를 지정하여 help 표시 영역을 만듭니다.
* input 에리어에서의 keydown, keyup, keypress, change 이벤트를 포착해, 헬프 영역에 캐릭터 라인 길이를 표시한다.

관련 파일은 3개.

view : (simple_form의 입력 화면) app/views/idea/_form.html.erb

이 화면에 대한 javascript app/assets/javascripts/idea.js.coffee

처리 본체를 정의한 javascript app/assets/javascripts/counter.js.coffee

view: (simple_form의 입력 화면) app/views/idea/_form.html.erb
$cat app/views/ideas/_form.html.erb
<%= simple_form_for( @idea , :html => {:class => 'form-horizontal' }) do |f| %>
<%= f.hidden_field :lock_version %>
<%= f.input :name, :required => true, :hint => ""%>
<%= f.input :description, input_html: { class: 'span8', rows: 3 }, :required => true, :hint => ""%>
<%= f.input :picture %>

<%= f.button :submit %>
<%= link_to I18n.t(:cancel, scope: :"views.buttons"), :back, class: :btn %>

<% end %>

이 화면에 대한 javascript app/assets/javascripts/idea.js.coffee

$cat app/assets/javascripts/ideas.js.coffee
$->
if $("#idea_name").val() != undefined
counter_bind('#idea_name', 32)
counter_bind('#idea_description', 4000)

처리 본체를 정의한 javascript app/assets/javascripts/counter.js.coffee

$cat app/assets/javascripts/counter.js.coffee
# 입력 문자열 수를 표시합니다.
# id 입력 양식 (text, textarea)의 id
# maxLen 최대 문자열 수
# couter_selecto 카운터 표시 selector. default = id + "~ .help-block:nth-of-type(1) (simple_form의 help 영역)
# preffix 카운터 수 앞에 추가 할 문자열. defaule = ""
# postfix 카운터 수 다음에 추가 할 문자열. default = "/maxLen chars"
@counter_bind = (id, maxLen, counter_selector = id + "~ .help-block:nth-of-type(1)", prefix = "", postfix = "/#{maxLen} chars") ->

if $(id) and $(id).val() != undefined $(counter_selector).html "#{prefix}#{$(id).val().length}#{postfix}"

$(id).bind "keydown keyup keypress change", ->
$(counter_selector).html "#{prefix}#{$(this).val().length}#{postfix}"