2011-02-03 5 views
0

이것은 쉽게 할 수 있지만 레일스에있는 것처럼 보이지는 않습니다.rails 3, erb (또는 haml), 좋은 사용자 환경에서 텍스트 입력을 200 자로 제한하는 방법은 무엇입니까?

우리는 200자를 넘지 않는 텍스트 입력을 수집해야합니다.

우리가 text_field를 사용하고 maxlength를 200으로 설정하면 우리는 똑같이 두 가지 똑같이 선택하는 것 같습니다 : (a) 일반적인 사용자의 화면에 맞지 않는 크기로 필드를 넓게 만듭니다. b) 사용자는 입력하는 동안 수평으로 스크롤해야합니다. UI 관점에서 악취에 접근합니다.

물론 text_area를 사용하고 자동으로 입력을 200으로 제한하고 싶습니다. 물론 text_area에는 제한이 없습니다.

우리는 확실히 "너무 길다"라고 말하기 위해 데이터를 제출하거나 단순히 데이터를 잘라 버릴 때까지 기다리기를 원하지 않습니다.

멋진 아이디어가 있으십니까? 입력 상자에 너비가 100 자이고 줄이 3 자라고 입력하면 사용자가 200 자 이상을 입력 할 수 없습니다.

이러한 종류의 UI 문제를 처리하는 몇 가지 UI 향상 프레임 워크가 있습니까? 특정 입력 필드에만 적용 할 수있는 방식으로 자바 스크립트 카운터를 추가하고 있습니까?

답변

2

자바 스크립트를 사용하여 텍스트 상자의 문자 수를 제한 할 수 있습니다.

예를 들어 :style => "limit" 또는 :"data-limit"=> 200으로 설정 한 다음 jQuery에서 CSS 선택기를 사용하여 해당 텍스트 상자 만 타겟팅 할 수 있습니다. 같은

뭔가 :

$(".limit").maxlength({ 
    // options 
}) 

심지어 깔끔한 : UI에 관해서는 http://www.stjerneman.com/demo/maxlength-with-jquery 또는 유사한 http://plugins.jquery.com/plugin-tags/character-counter

같은 플러그인

var limited_textbox = $("[data-limit]"); 
limited_textbox.maxlength({ 
    maxCharacters: limited_textbox.data("limit"), 
    // options 
}) 

, 당신은 텍스트 상자처럼 페이스 북을 사용할 수 http://www.9lessons.info/2010/03/facebook-like-expanding-textbox-with.html

+0

+1이 같은 자바 스크립트 솔루션은 제가 과거에 사용한 유일한 것입니다. – raidfive

+0

왜이 방법을 사용하는 것이 더 쉬운가? : maxlength => 200' 자바 스크립트를 사용하여 이해할 수있는 이유는 특정 문자를 세지 않고 단순한 제한으로 DOM을 사용하는 경우입니다. Javascript는이 솔루션을 해결하기 위해 많은 불필요한 오버 헤드를 추가합니다. – dbslone

+0

@ dbslone HTML5의 'textarea' 태그에'maxlength' 속성이 추가되어이 답변의 날짜가 2011 년 2 월 3 일이기 때문에 – Krule

7

시험해보십시오. = f.text_field :phone_area, :size => 4, :maxlength => 3

관련 문제