テキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限)

スクロールバーを表示させない

テキストエリアでは、枠を超える文字数を入力すると縦スクロールバーが表示されますが。それを無効化します。(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/

  • このエントリーをはてなブックマークに追加

関連記事

no image

テキストボックス・エリアにプレースホルダーを実装

HTML5のplaceholder属性を使用する /* Firefox, Chrome, Safari, Opera */ IE(8+)でもplacehold

no image

Javascriptでユーザエージェントを取得

Javascriptでユーザエージェントをwindow.navigator.userAgentで取得できます。あとは、正規表現を使用してブラウザの振り分けなどが行えます。 alert( wind

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑