JavaScript でテキスト欄を選択リストにする

JavaScript でテキストフィールドに選択リストを実装する方法をご紹介します。HTMLタグの知識だけで設定可能で、後からの変更も簡単です。

「選択リスト」と言っても、HTMLのプルダウンリスト(<select>)ではありません。表示された選択肢をクリックする事によって、指定した内容がテキストフィールドに入ります。

設定方法

入力フォームのあるページを編集します。ここでは「すぐ使えるCMS」の入力フォームを編集する想定です。templates/admin/2.html を編集して下さい。

リンク設定

選択リストにしたい入力欄の近くにリンクを設定します。下記例と後述の「調整方法」を参考に、選択肢を追加して下さい。

コピー
[<a href="javascript: set_value('linetext1', 'お知らせ')">お知らせ</a>]
[<a href="javascript: set_value('linetext1', '緊急情報')">緊急情報</a>]
[<a href="javascript: set_value('linetext1', '【重要】', 1)">重要</a>]
[<a href="javascript: set_value('linetext1', '')">クリア</a>]

調整方法

  • 赤字部分は、対象の入力欄の name 属性の値にして下さい。
  • 青字は入力したいテキストを指定します。
  • '【重要】' の後に緑で「, 1」とありますが、これは、既存の入力に追記する場合に指定して下さい。内容を置き換える場合は指定不要です。

アップロードと動作確認

ここで一旦、編集したファイルをサーバに上書きアップロードして、動作確認をして下さい。

期待通り動作すれば、これで設定完了です。

JavaScript の設定(オプション)

「すぐ使えるCMS」(旧「すぐ使えるCGI」)の Ver. 4.8 以下に設定をしていたり、他のページにこの設定をしている場合は JavaScript の設定も必要です。

もう一度同じファイル(「すぐ使えるCMS」なら templates/admin/2.html )を編集して、ページ末尾の </body> (終了タグ)の直前に以下の JavaScript コードを追加して下さい。

コピー
<script type="text/javascript">
function set_value(MyName, MyItem, IfAppend){
    var FM = document.getElementById("mainform") || document.forms[0];
    switch(IfAppend){
        case 1: //追記
            eval("FM."+MyName+".value += '"+MyItem+"'");
            break;
        default: //入れ替え(初期設定)
            eval("FM."+MyName+".value = '"+MyItem+"'");
            break;
    }
}
</script>

ページ内にフォームが複数ある場合、3行目の「var FM = document.forms[0];」部分は、「(何番目のフォームか)-1」で数字の0(赤字部分)を置き換えて下さい。

アップロードと動作確認

もう一度編集したファイルをサーバに上書きアップロードして、動作確認をして下さい。