web-dev-qa-db-ja.com

テキストエリアのサイズ変更をオフにする

自分のサイトでテキストエリアのサイズ変更をオフにしようとしています。現在、私はこの方法を使用しています：

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

私は自分の方法が正しくないことを知っており、JavaScriptでより良い方法を探しています。私は初心者なので、私にとって最適なソリューションはHTML5またはjQueryです。

htmltextarea
114
Wizard

このCSSを試してサイズ変更を無効にしてください

すべてのテキストエリアのサイズ変更を無効にするCSSは次のようになります。

textarea {
    resize: none;
}

代わりに、名前（textarea HTMLが）で単一のtextareaに割り当てることができます：

textarea[name=foo] {
    resize: none;
}

またはidによって（textarea HTMLは）：

#foo {
    resize: none;
}

から取得： http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

244
feco

これはあなたの仕事をします

  textarea{
        resize:none;
    }

enter image description here

19
Raab

CSS3はこの問題を解決できます。残念なことに、現在サポートされているのは 使用されているブラウザの60％ のみです。

IEおよびiOSの場合、サイズ変更をオフにすることはできませんが、textareaおよびwidthを設定してheightディメンションを制限できます。

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

デモを参照

7
Oriol

アプリケーションのすべてのテキストエリアのデフォルトの動作を元に戻したい場合、CSSに次のオプションを追加できます。

textarea:not([resize="true"]) {
  resize: none !important;
}

また、次の手順を実行して、サイズ変更する場所を有効にします。

<textarea resize="true"></textarea>

このソリューションは、サポートしたいすべてのブラウザで機能するとは限りません。ここでresizeのサポートのリストを確認できます： http://caniuse.com/#feat=css-resize

2
Darlesson

Htmlのドラッグ可能な属性を使用するだけで簡単に実行できます

<textarea name="mytextarea" draggable="false"></textarea>

デフォルト値はtrueです。

2
Thusitha Wickramasinghe

質問ごとに、私はjavascriptに答えをリストしました

TagNameの選択による

document.getElementsByTagName('textarea')[0].style.resize = "none";

IDの選択による

document.getElementById('textArea').style.resize = "none";
1
Mano
//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

上記のコードはほとんどのブラウザで動作します

//HTML:
<textarea id='textarea' draggable='false'></textarea>

最大数のブラウザで動作するように両方を実行します

0
nobody