2011-02-03 21 views
0

これは非常に簡単ですが、Railsにないようです。rails 3、erb(またはhaml)、素敵なユーザーエクスペリエンスでテキスト入力を200文字に制限するにはどうしたらいいですか?

ユーザからのテキスト入力を200文字以下にする必要があります。

text_fieldを使用し、maxlengthを200に設定すると、同じようにUGLYの2つの選択肢しかないようです:(a)一般的なユーザーの画面に収まらないサイズb)ユーザは入力中に水平にスクロールしなければならない。いずれかのUIの観点から悪臭に近づく。

もちろん、text_areaを使用して自動的に入力を200に制限することもできますが、text_areaには制限がありません。

私たちは確かに、「あまりにも長かった」と言ったり、さらに悪いことにデータを切り捨てるようにデータを送信するまで待たずにいます。

すてきなアイデアですか?入力ボックスの幅を100文字、高さを3行とすると、ユーザーが200文字以上入力できなくなります。

このようなUIの問題を処理するUI拡張フレームワークはありますか?特定の入力フィールドにのみ適用するような方法でjavascriptカウンタを追加していますか?

答えて

2

javascriptを使用してテキストボックスの文字数を制限することができます。

たとえば、: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 
}) 

、あなたはテキストボックスのようなFacebookのを使用することができます。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

関連する問題