Input Assister （仮） – 簡単な記述でテキストボックスでのちょっとした入力支援を可能にする JavaScript

2007

08-10

14:28

小ネタ

javascript

2009-02-09 14:20
ソースコードへのリンク先がおかしったので，本エントリに掲載しました．

はじめに

お仕事始めようとしたらふと気になってしょうがなくなってきたので，書いてみました．

http://www.iwa-ya.net/labs/static/inputassister/

夕方にミーティングがあるのに何やってるんだろ．．．

概要

テキストボックスをフォーカスしたときに語のリストが表示され，そのうちのいずれかをクリックすると，クリックした語がテキストボックスに入力される，というだけのものです．

まぁそれだけではありきたりなので，対象のテキストボックスと表示する語のリストとの対応を簡単な記述で指定できるようにしてみました．

その記述について

inputassister.js （~~キタナイソース~~後に掲載）をロード後，次のように記述します．

InputAssister.map = [
  { id: 'input1', list: [ 1, 2, 3, 4, 5 ] },
  { id: 'input2', list: [ 'a', 'b', 'c', 'd', 'e' ] },
  { id: 'input4', list: [ 'ほげ', 'ふが', 'ぴよ', 'foo', 'bar', 'baz' ] }
];
InputAssister.lister_id = 'lister';

InputAssister.map で，対象となるテキストボックスの id と表示させたい語のリストを指定します．複数の指定も可能です．上の例は，id="input1" なテキストボックスをフォーカスしたときに，「1 2 3 4 5」という語のリストが表示される（そして，いずれかをクリックすると，その値がテキストボックスに入力される），というような設定となっています．

InputAssister.lister_id には，語のリストの表示先のボックスの id を指定します．上の例では，<div id="lister"></div> のようなブロックの中に，語のリストが表示されるような設定となっています．

ちなみに

表示される語は，それぞれ ref クラスな a タグ，<a class="ref">...</a>，で囲ってあります．（文章の意味的に li タグの方がいいのかな．．．？）

あと，要 prototype.js です．

ソースコード

/*
 *
 * inputassister.js
 *
 *   required: prototype.js
 *   
 */
var InputAssister = {
  init: function() {
    if( !this.map || !$( this.lister_id ) ) { alert( 'false' ); return false; }
    this.lister = $( this.lister_id );
    this.listerDefaultHTML = this.lister.innerHTML;
 
    for( var i = 0; i < this.map.length; i++ ) {
      new Assigner( $( this.map[i].id ), this.map[i].list );
    }
  }
 
};
 
var Assigner = Class.create();
Assigner.prototype = {
  initialize: function( elm, list ) {
    Event.observe( elm, 'focus', function( e ) {
      InputAssister.lister.innerHTML = '';
      for( var i = 0; i < list.length; i++ ) {
        new TagA( list[i], elm );
      }
    }.bindAsEventListener( this ), false );
 
    //Event.observe( elm, 'blur', function( e ) {
    //  InputAssister.lister.innerHTML = InputAssister.listerDefaultHTML;
    //}.bindAsEventListener( this ), false );
  }
};
 
var TagA = Class.create();
TagA.prototype = {
  initialize: function( val, elm ) {
    this.formElement = elm;
    this.elem = document.createElement( 'a' );
    this.elem.className = 'ref';
    this.elem.innerHTML = val;
    Event.observe( this.elem, 'click', function( e ) {
      this.formElement.value = val;
      this.formElement.focus();
    }.bindAsEventListener( this ), false );
    InputAssister.lister.appendChild( this.elem );
  }
};