HTML DOM Input SearchのreadOnlyプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Searchオブジェクトが持つreadOnly（リードオンリー）プロパティは、検索入力フィールドを読み取り専用にするかどうかを設定、または現在の状態を取得するために使用されるプロパティです。
readOnlyプロパティを有効にすると、その要素はユーザーが編集できなくなります。ただし、読み取り専用の要素であっても、Tabキーやマウスクリックによるフォーカス移動は可能です。また、読み取り専用の要素にデフォルト値が入力されている場合、フォーム送信時にその値はサーバーへ送信されます。この点は、要素が無効化され値も送信されなくなるdisabled属性との大きな違いです。
構文
readOnlyプロパティの基本的な構文は以下の通りです。
readOnlyプロパティを設定する場合
searchObject.readOnly = true|false
trueを指定すると検索フィールドが読み取り専用になり、falseを指定すると編集可能な状態になります。デフォルト値はfalseです。
サンプルコード
次に、Search要素のreadOnlyプロパティを使った具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>Search readOnly property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>下のボタンをクリックすると、上のフィールドのreadOnlyプロパティが変更されます</p>
<button onclick="changeRead()">CHANGE</button>
<script>
function changeRead() {
document.getElementById("SEARCH1").readOnly = true;
}
</script>
</body>
</html>
なお、元のサンプルコードではgetElementByIdで「PASS1」を参照していましたが、これはinput要素のid（SEARCH1）と一致していないため正しく動作しません。ここでは「SEARCH1」に修正したコードを掲載しています。
実行結果
上記のコードをブラウザで実行すると、以下のように表示されます。
CHANGEボタンをクリックすると、JavaScriptによって検索フィールドが読み取り専用に設定され、テキストを編集できなくなります。
このようにreadOnlyプロパティを活用すれば、ユーザーに値は見せたいが編集はさせたくない、といったシーンで検索フィールドを柔軟に制御することができます。
-
HTML DOM Input Search の size プロパティとは？取得・設定方法を実例付きで解説
HTML DOM の Input Search size プロパティは、検索入力フィールド（<input type=search>）の size 属性値を取得または設定するために使用されるプロパティです。size 属性は、検索フィールドの幅を文字数を単位として定義します。特に指定しない場合、デフォルトの幅は 20 文字です。構文（Syntax）size プロパティを設定する場合searchObject.size = numberここで number には、検索フィールドの幅を表す文字数を指定します。デフォルト値は 20 文字です。使用例（Example）以下は、Input Sear
-
HTML DOM Input Searchのrequiredプロパティの使い方を解説
HTML DOMのInput Searchオブジェクトにおけるrequiredプロパティは、<input>要素のrequired属性と連動するプロパティです。フォームがサーバーへ送信される前に、検索フィールドの入力が必須かどうかを設定・取得するために使用されます。このプロパティを利用することで、ユーザーがrequired属性付きの検索フィールドを空欄のままにした場合、フォームの送信を防ぐことができます。構文requiredプロパティの構文は以下の通りです。プロパティの設定searchObject.required = true|falsetrueを指定すると、フォーム送信前に検索フ