textareaを編集不可(読み取りのみ)にする方法を解説!

textareaを編集不可(読み取りのみ)にする方法を解説します。textareaを編集不可にすることで、入力はできなくなるが、すでに入力されている文字を選択することはできるので文章のコピーのみを許可する場合に使うと便利です。

コンテンツ [表示]

  1. 1textareaを編集不可(読み取りのみ)にする方法
  2. 1.1HTMLのみでtextareaを編集不可(読み取りのみ)にする方法
  3. 1.2JavaScriptを用いてtextareaを編集不可(読み取りのみ)にする方法
  4. 1.3「disabled」でも入力不可にできるのか!?
  5. 1.4readonlyとdisabledの違いについて
  6. 2textareaでreadonlyの時のスタイルの指定方法
  7. 3まとめ

textareaを編集不可(読み取りのみ)にする方法

フォームでよく使用するtextareaを編集不可(読み取りのみ)にすることで、textareaのテキストボックスに入力不可となりますが、すでに入力されている文字を選択することはできるので文章のコピーのみを許可する場合に使うと便利です。

それではtextareaの入力不可とさせる方法について、HTMLとJavaScriptを用いた2つの方法について解説します。

Photo bymohamed_hassan

HTMLのみでtextareaを編集不可(読み取りのみ)にする方法

HTMLのみでtextareaを編集不可にするにはtextareareadonlyという属性をつけるのみで実現できます。

それでは実際にサンプルコードを用いて、そのコードとブラウザ上での挙動を見てみましょう。

ためしにプレビュー上のコピペ専用のあとに何かテキストを入力してみましょう。編集不可の状態なので入力できない事が確認できるかと思います。

JavaScriptを用いてtextareaを編集不可(読み取りのみ)にする方法

JavaScriptを用いてtextareaを編集不可にする方法もHTMLとやることはほとんど変わりません。

textareaidclass属性を付与し、それをJavaScripで読み込み、textareareadonly属性を付与するのみとなります。

この時注意点としてはreadonlyの「o」は大文字の「O」にすることです。

それではサンプルコードで見てみましょう。

このようにtextareaのテキストボックスは入力不可となっていることが分かります。

「disabled」でも入力不可にできるのか!?

先に答えを述べると「できます」。

実際にどのような挙動になるのサンプルコードで確認してみましょう。

ためしにテキストボックスに何かテキストを入力しようとしても、できなくて、一見readonlyと同じであるように思えます。

ではreadonlydisabledの違いは何でしょうか?

readonlyとdisabledの違いについて

readonlydisabledの違いについてはPHPなどのサーバー言語と一緒に用いてみるとよく分かります。

一度以下のサンプルコードをHTMLに書いてみてください。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- disabled -->
  <form name="form">
    <textarea cols="30" rows="10" name="comment" disabled>コピペ専用</textarea>
    <input type="submit" value="送信">
    <div class="test"></div>
  </form>
  <!-- readonly -->
  <form name="form">
    <textarea cols="30" rows="10" name="comment" readonly>コピペ専用</textarea>
    <input type="submit" value="送信">
    <div class="test"></div>
  </form>
</body>

</html>

そしてテキストボックス横にある送信ボタンを押してみてください。

そうするとURLに着目してほしいのですが、disabledの方の送信ボタンを押すと?の後にテキストボックスの内容が記述されないのに対して、readonlyの方は?の後にテキストボックスの内容が続いていることが分かります。

以上からdisabledの方はサーバーに情報を渡すことができないのに対して、readonlyの方はサーバーに情報を渡すことができることが分かります。つまり動作的にも文字通りの意味で、readonlyは「読み取り専用の意味」でdisabledは「無効の意味」となります。

以上がreadonlydisabledの違いとなります。これはサーバーサイドのプログラミングを勉強する際に引っかかるポイントとなりますので、ここで紹介したポイントを覚えておきましょう。

textareaでreadonlyの時のスタイルの指定方法

readonlyがついているtextareaにのみCSSを効かせる方法について解説します。その方法とはCSSの擬似クラスの1つである:read-only をつけるというものです。

これだけで簡単にreadonly属性がついているtextareaにのみCSSを効かせることができます。

それでは実際にサンプルコードを用いて、コードと挙動を見てみましょう。

このようにreadonly属性がついている2つ目のテキストボックスのみ背景色が変わっていることが分かります。

まとめ

いかがでしたでしょうか?

何か少し長い文章やリンクをユーザーにコピペさせたいときにこの手法はとても便利です。

ぜひ使ってみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次