テキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限)
スクロールバーを表示させない
テキストエリアでは、枠を超える文字数を入力すると縦スクロールバーが表示されますが。それを無効化します。(css) デモ
/* Firefox, Chrome, IE8+, Safari, Opera */ textarea { overflow: hidden; }
幅・高さ固定
テキストエリアのリサイズを無効化をします。IEは、resizeがサポートされていません。デモ
/* Firefox, Chrome, Safari, Opera*/ textarea { resize: none; }
自動リサイズはjQueryプラグインを使用すると実現できます。
IEでもリサイズ
実現方法がいくつかあるようです。
「jQuery UI - Resizable」を使用して実現する例 (デモ)
<link href="jquery-ui.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery-ui.min.js" type="text/javascript"></script> <textarea id="ieresizable" name="resizetest"></textarea> <script type="text/javascript"> $(function() { $('#ieresizable').resizable({ handles: "se", minWidth: 150, minHeight: 100, maxWidth: 300, maxHeight: 200, }); }); </script>
Resizableのオプションなど
文字数制限
HTML5のmaxlengthを使用する
<textarea maxlength="50"></textarea> <!-- 50文字まで -->
jQueryプラグインを使用する
IE、Operaでは、maxlengthがサポートされていません。実現するにはjQueryプラグインを使用する方法があります。Maxlength Plugin
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.maxlength.js" type="text/javascript"></script> <textarea maxlength="50" class="textarea333"></textarea> <!-- 50文字まで --> <script type="text/javascript"> $('.textarea333').maxlength(); </script>
単語数で制限するオプションもあるようです(が、)
HTMLのmaxlengthとMaxlength pluginのデモ
Maxlength for textarea using jQuery
http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/
関連記事
-
Javascriptでユーザエージェントを取得
Javascriptでユーザエージェントをwindow.navigator.userAgentで取得できます。あとは、正規表現を使用してブラウザの振り分けなどが行えます。 alert( wind
-
テキストボックス・エリアにプレースホルダーを実装
HTML5のplaceholder属性を使用する /* Firefox, Chrome, Safari, Opera */ IE(8+)でもplacehold