テキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限)
スクロールバーを表示させない
テキストエリアでは、枠を超える文字数を入力すると縦スクロールバーが表示されますが。それを無効化します。(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






