inputEmailObject.multipleプロパティ

inputEmailObject.multipleは、メールアドレス入力欄(type属性がemailであるinput要素)のmultiple属性の値を取得、もしくは、設定するプロパティ。

multiple属性には、メールアドレス入力欄(type属性がemailであるinput要素)にカンマ区切りで複数のメールアドレスを入力出来るようにするかどうかを指定することができる。

構文

取得

var $multiple = $inputElementReference.multiple;

戻り値

メールアドレス入力欄(type属性がemailであるinput要素)のmultiple属性の値。

  • カンマ区切りによる複数入力が可能であれば、trueを返す。
  • カンマ区切りによる複数入力が可能でなければ、falseを返す。

設定

$inputElementReference.multiple = boolean;
boolean
カンマ区切りによる複数入力を可能にするかどうかを指定。
  • true:複数入力可能にする。
  • false:複数入力可能にしない。

サンプル

メールアドレス入力欄のmultiple属性の値:

メールアドレス入力欄:

サンプルの動作について

  • 「true」ボタンをクリックすると、メールアドレス入力欄を複数入力可能にする。「メールアドレス入力欄のmultiple属性の値:」の右横に「true」と表示する。複数のメールアドレスを入力した状態でも送信でる。
  • 「false」ボタンをクリックすると、メールアドレス入力欄を複数入力不可能にする。「メールアドレス入力欄のmultiple属性の値:」の右横に「false」と表示する。multiple属性対応ブラウザであれば、複数のメールアドレスを入力した状態で送信しようとしても送信できない。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setMultiple( $multiple ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.multiple = $multiple;
    var $multiple = $elementReference.multiple;
    document.getElementById( "sampleOutput" ).innerHTML = $multiple;
}
</script>

HTML

<p>
    <button onclick="setMultiple(true);">true</button>
    <button onclick="setMultiple(false);">false</button>
</p>
<p>メールアドレス入力欄のmultiple属性の値:<span id="sampleOutput"></span></p>
<form id="sampleForm" method="get" action="http://alphasis.info/2014/01/javascript-dom-input-email-multiple/" target="_blank">
    メールアドレス入力欄:<input type="email" id="sample" name="sampleName" value="sampleA@hoge.tld,sampleB@hoge.tld" multiple>
    <br />
    <input type="submit" value="送信">
</form>

スポンサード リンク

カテゴリー: DOM, input type=email オブジェクト, JavaScript, リファレンス パーマリンク