JavaScript一覧

[JavaScript] フォーカスがある間リロードを止める

評価用に作ってみた、リロードを一時停止する処理。METAタグを使ったリロードよりも画面がチカチカするので、これ自体は不採用になったけど、状況によっては使えるかもしれないのでメモメモ。

まずはヘッダに以下のような感じで記述。

<script type="text/JavaScript">
<!--
  var id;
  function reload( KBN ){
    if( KBN == "reload" ){
      id = setTimeout("location.reload()", 1000);
    } else if( KBN == "kick" ){
      location.reload();
    } else {
      clearTimeout( id );
    }
  }
//-->
</script>

通常は自動更新をかけているので、bodyタグにonLoad()の記述。

<body class="dsp" onLoad='reload("reload")'>

自動再表示のチェックボックスには、以下の記述。

<input type="checkbox" name="flg_reload" value="Y" onClick='reload("kick");'>自動再表示

フォーカスが当たっている間、処理を止めたいテキストボックスなどには、以下の記述。

<input name="reload_time" size="3" maxlength="3" value="10" onFocus='reload("");' onBlur='reload("kick")'>秒間隔で更新

もっといい方法があるかもしれませんが、咄嗟に思いついたやり方がこれ。実際この処理を使った画面はC言語で作ったCGIだったので、Script内の時間や、更新間隔のテキストボックスの値などはベタ書きではないです。

もうちょっとチカチカ(更新のときの点滅)がなければ、いろいろと使えそうなのになぁ……。


[JavaScript] EnterキーでSubmit

以前、Web画面上でEnterキーを無効にする方法を記事にしましたが、今度はEnterキーが入力されたらSubmitする方法を。

具体的には、テキストボックスに何かを入力して、EnterキーでSubmitしたい場合に使えるかな、と。ついでに何番目のテキストボックスでEnterキーが押されたかも取得してみようと思います。あくまで自分用のメモとして(笑)

まずは、Enterキーが押されたらSubmitするスクリプト。

<Script Type="text/javascript">
  <!–
  function enter(){
    if( window.event.keyCode == 13 ){
      document.form1.submit();
    }
  }
  //–>
</Script>

これを<Head>~</Head>の間に書いておき、テキストボックスのタグで呼べばOK。

<Form Name="form1">
  <Input Type="text" Size="10" onKeyPress="enter();">
</Form>

これで、Submit用にボタンを用意しなくても、Enterキーで送信できる。ボタンを配置しないで、Enterキーで何かアクションを起こしたいときに使えると思う。

次に、何番目のテキストボックスでEnterキーが入力されたかも一緒に判断したい場合。

用途としては、Enterキーを入力してアクションを起こした後に、入力していたテキストボックスが何番目かを自動的に取得したい場合など。

以下のような感じに作れば、取得できるっぽい。

<Script Type="text/javascript">
  <!–
  function enter( element ){
    if( window.event.keyCode == 13 ){
      var maxTextNum = 0;
      var myTextNum = 0;

      for( var i = 0; i < document.forms[0].length; i++ ){
        if( document.forms[0].elements[i].type == "text" ){
          maxTextNum++;
          if( document.forms[0].elements[i] == element ){
            myTextNum = maxTextNum;
          }
        }
      }
      alert( "全 " + maxTextNum + " 個中 "
           + myTextNum + " 個目に入力しました!" );
    }
  }
  //–>
</Script>

<Form>
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
  <Input Type="text" Size="10" onKeyPress="enter( this );">
</Form>

実際に自分が作ったのはStruts環境上なので、紹介した組み方とはちょっと違いましたが、普通のWebページで使う場合は上記でいけると思います。

テキストボックスの順番を取得する方法は、あまり使い道がなさそうですが・・・(笑)


[JavaScript] 子ウィンドウを開く最大数を指定し、ウィンドウを使いまわす

ヘッダ内に以下を記述。もしくは外部ファイルで用意し、ヘッダ内で読み込む。

<SCRIPT LANGUAGE="JavaScript">
<!–
  // —— ページロード時の初期処理
  function setValue(){
    maxWinNo = 5;
    winNo = 0;
    subWin = new Array();
  }

  // —— サブウィンドウを開く処理
  function openWindow(){
    windowCount = 0;
    if( winNo > 0 ){
      for( i = 0; i < winNo; i++ ){
        if( ! subWin[i].closed ) windowCount++;
      }
    }

    if( windowCount == 0 || winNo >= maxWinNo ) winNo = 0;

    winWidth = screen.width / maxWinNo;
    winLeft = ( winWidth * ( winNo + 1 ) ) – winWidth;
    if( winLeft + winWidth > screen.width ){
      winLeft = screen.width – winWidth;
    }

    subWin[winNo] = window.open( "",
                                 "Child" + winNo,
                                 "width=" + winWidth +
                                 ", height=" + ( screen.height – 30 ) +
                                 ", left=" + winLeft +
                                 ", top=0, scrollbars=no" +
                                 ", location=no, alwaysRaised=yes" );
    var subWinHtml = "<HTML><HEAD><TITLE>Child</TITLE></HEAD>\n"
                   + "<BODY TEXT=White BGCOLOR=Black>\n"
                   + "<TABLE BORDER=0 WIDTH=’100%’ HEIGHT=’100%’><TR>\n"
                   + "  <TD ALIGN=center VALIGN=middle>Child<BR><BR>\n"
                   + "    Window Width: " + winWidth + "<BR>\n"
                   + "    Window Left : " + winLeft  + "<BR>\n"
                   + "    Screen Width: " + screen.width + "\n"
                   + "  </TD></TR></TABLE>\n"
                   + "</BODY></HTML>\n"
    subWin[winNo].document.write( subWinHtml );
    subWin[winNo].document.close();
    subWin[winNo].focus();
    winNo++;
  }

  // —— 親ウィンドウを閉じるときの後処理
  function closeWindow(){
    for( i = 0; i < winNo; i++ ){
      if( ! subWin[i].closed ) subWin[i].close();
    }
  }
//–>
</SCRIPT>

BODYタグに、ページを読み込んだときと、ページを閉じるときの処理を入れる。

<BODY onLoad="setValue()" onUnload="closeWindow()">

最後に、子ウィンドウを開くためのアクションを入れる。

<INPUT TYPE="button" NAME="btnWinOpen" VALUE="表示" onClick="openWindow()">

[JavaScript] Enterキー無効化

忘れないように・・・。

document.onkeypress = enter;
function enter(){
  if( window.event.keyCode == 13 ){
    return false;
  }
}

この処理を思いつくのに数時間・・・ネットで検索すれば早かったかもなぁ・・・。


スポンサーリンク