入力フィールド自動追加ボタン

インプットフィールドへ入力後、追加ボタンクリックで新しいフィールドが現れます。

動作環境 :
MacIE4,5/MacNN4,6,Moz/WinIE4,5/WinNN4,6,Moz/LinuxNN4( LinuxNN6,Moz 未確認 )


(これは山之内さんが最初アイディアを用意してくれたもので、 はじめはonblurで自動追加を試したんだけど安定しなかったのでこの形になりました)
*( inputフィールドのnameは key0,key1,key2,key3...という具合にふられていきます )

更新履歴
























★addinput.htm ( 緑字は必須  赤字は自分で書き換えて使ってください )

<script language=JavaScript src="addinput.js"></script>

<body bgColor="#ffffff" onload="mkInputTEXT('ITM')">

<!-- キーワード入力処理 -->

<div style="position:absolute" id=ITM></div>  ← 出力先レイヤー 

<script>  
	formname='searchdata'          //FORMの名前
	formaction='http://test4.cgi'  //送信先
</script>addinput.js


/*===================================================================
 * addinput.js
 * addable InputTextField  tato@fureai.or.jp 2000 11 use free
 * Supoort http://game.gr.jp/js/
 *-------------------------------------------------------------------
 */

//--2001.02.10--------------------------------------------
// NN4.x Mac 入力したキーワードが多くなり、ブラウザーの縦
// の長さ以上になってもスクロールバーが現れない。
// 対策 : あらかじめ<br>などで必要なスクロールエリア
// を確保しておいてください(T-T)

//--2001.02.10--------------------------------------------
// NN4.xリサイズバグ対策 リサイズ時には強制リロードします
// データが消えてしまうので*注意書き*が必須です。

if( document.layers ) window.onresize=resizeFunc
function resizeFunc(){
   var avoid_chash=new Date();
   location.href=location.href.split('?')[0]+"?"+avoid_chash.getTime() 
}

//--2000.12.01--------------------------------------------
// MacIE5クラッシュ対策

var MacIE5=(navigator.userAgent.indexOf('Mac')!=-1&&navigator.userAgent.indexOf('MSIE 5')!=-1)
  
  if(MacIE5)
    var resetbutton = "button"
  else 
    var resetbutton ="reset"

//--2000.12.01--------------------------------------------
// MacIE4等ユニコード化け対策
// 必要な文字列は決め打ちで用意してください。

 var _UTF = "あ".length >1;

 if(_UTF) {
      msg1=unescape("%u30AD%u30FC%u30EF%u30FC%u30C9%u5165%u529B%uFF1A");
      msg2=unescape("%u3067");
      msg3=unescape("%u306A%u3082%u306E");
      msg4=unescape("%u30AD%u30FC%u30EF%u30FC%u30C9%u3092%u8FFD%u52A0%u3059%u308B");
      msg5=unescape("%u9001%u4FE1");
      msg6=unescape("%u30AF%u30EA%u30A2");
 } else {
      msg1="キーワード入力:";
      msg2="で";
      msg3="なもの";
      msg4="キーワードを追加する";
      msg5="送信";
      msg6="クリア";
 }

 function outputLAYER(layName,html){
    if(document.getElementById){           //IE5 NN6 Mozilla用
      document.getElementById(layName).innerHTML=html
    } else 
    if(document.all){                     //IE4用
      document.all(layName).innerHTML=html
    } else 
    if(document.layers) {                      //NN4用
       with(document.layers[layName].document){
         open()
         write(html)
         close()
      }
    }
  }


var InputTEXTlength=0
var InputValue=new Array()

function mkInputTEXT(layName){
	
	var htmlInputTEXT =""
                    
                    +"<FORM name=\""+formname+"\" action=\""+formaction+"\" method=\"get\">"
                    
                    +"    <P><BR></P><B> " + msg1 + " </B><BR>"
                      
                    for (i=0;i<=InputTEXTlength;i++){  


                      if(!window.InputValue[i]) InputValue[i]=""
                      if(i!=0)                  htmlInputTEXT+="    " + msg2 + " <br>"

                      htmlInputTEXT+=""                      
                      
                      +"    <INPUT onfocus=\"\""
                      +"           onchange=\"InputValue["+i+"]=this.value\""
                      +"           onblur=\"InputValue["+i+"]=this.value\""
                      +"           value=\""+InputValue[i]+"\""
                      +"           type=\"txet\" "
                      +"           name=\"key"+i+"\">"
                      

                    }
                    
                    htmlInputTEXT+=""
                    
                    +"    " + msg3 + ""
                    +"    <br>"

                    +"   <INPUT  onclick=\"mkInputTEXT('"+layName+"');\""
                    +"           type=button "
                    +"           value=\"" + msg4 + "\">"

                    +"    <INPUT type='submit' value=\"" + msg5 + "\"> "
                    
                    + "    <INPUT type='" + resetbutton + "' value='" + msg6 + "' onClick=\"resetAll('"+layName+"')\"> "
                    
                    +"</FORM>"
                    
    if(_UTF) 
      htmlInputTEXT=unescape(escape(htmlInputTEXT).split('%00')[0])

    outputLAYER(layName,htmlInputTEXT)
    InputTEXTlength++;
	  
	  
}

function resetAll(layName){
	
	//clear elemnts values
	var formoj=getOj(layName)
	for (k=0;k<InputTEXTlength;k++)formoj.elements[k].value=""
	
	//clear array
	InputTEXTlength=0
	InputValue=new Array()
	
	//clear outputs
	mkInputTEXT(layName)
	
}

function getOj(layName){
	
	//get the form object
	if(document.layers)     return document.layers[layName].document.forms['searchdata']
  else if(document.all)   return document.forms['searchdata']
  else if(document.getElementById)
                          return document.forms['searchdata']
}








HOME