JavaScriptメモ

●リンクで前のページに戻る
JavaScriptを使って、次のように書けます。 

<a href="javascript:history.go(-1)">前のページに戻る</a>

実際に試してみて下さい。

●入力内容を確認するダイアログを出す

function fl_confirmAndSubmit(){
    a = document.form1.input1.value;
    result = confirm(a + "でよろしいですか？");
    if(result){
        document.form1.submit();
    } else{
        alert("キャンセルしました。");
    }
    return false;
}

これはtype="button"のボタンのonClickイベントに設定する例です。 フォームのonSubmitイベントに設定する場合は、 

function fl_confirmAndSubmit(){
    a = document.form1.input1.value;
    result = confirm(a + "でよろしいですか？");
    if(! result){
        alert("キャンセルしました。");
        return false;
    }
    return true;
}

このように、Submitを続行する場合は真を、キャンセルする場合は偽を返します。

●ポップアップで開いたウィンドウから親ウィンドウを操作する

/* 元のウィンドウのURLを変更します。 */
if(opener.closed){
    alert("(元のウィンドウが閉じられています。)");
} else {
    opener.location.href = "/the/path/of/newpage.html";
}

下はもう少し実用的な例の完全なHTMLです。まず元のウィンドウ側 

<html><body>
<script type="text/javascript">
function openSelectWindow(){
    window.open("win2.html", "selwin",
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=yes,resizable=yes,width=200,height=200");
}
</script>
<form name="form1">
果物コード
<input type="text" value="" maxlength="10" size="15" name="fruitCode">
<input type="button" value="..." onClick="openSelectWindow()"><br/>
<input type="submit" value="決定">
</form>
</body></html>

そして、オープンされるウィンドウ(win2.html)のHTML。プルダウンから項目を選んで「決定」を押すと、 そのコードが元のウィンドウの入力欄に補完されて、ウィンドウが閉じます。 

<html><body>
<script type="text/javascript">
function selected(fruitCode){
    if(window.opener.closed){
        alert("元のウィンドウが既に閉じられています。");
    } else {
        window.opener.document.form1.fruitCode.value = fruitCode;
    }
    window.close();
}
</script>
<form>
果物の一覧
<select name="fruitCode" size="5">
<option value="ORN" selected="1">みかん</option>
<option value="APL">りんご</option><option value="MEL">メロン</option>
<option value="PEA">桃</option><option value="GRP">ぶどう</option>
</select>
<input type="button" value="決定" onClick="selected(this.form.fruitCode.value)">
<input type="button" value="キャンセル" onClick="window.close()">
</form>
</body></html>

●ポップアップウィンドウを開く簡単リファレンス

window.open("newpage.html", "newWindowId",
"toolbar=no,status=no,location=no,directories=no,menubar=no,
scrollbars=yes,resizable=yes,width=300,height=300");

●サイズなどを指定した新しいウィンドウを開きつつ、そのウィンドウにPOSTメソッドでフォームをSubmitするには
・サイズなどを指定した新しいウィンドウにGETメソッドでフォームをSubmitする
・サイズなどは指定せず新しいウィンドウにPOSTメソッドでフォームをSubmitする
は両方とも簡単ですが、この2つが混ざるとどーうなっちゃうの？
まさにすごい奴らが手を組んだ(帰れ)
正解は、「先にその名前のウィンドウをwindow.open()で開いてから、Submitする」。 例はこんな感じです。 

<form name="JumpToDetailInfoForm" action="/the/path/of/DetailInfo.jsp"
 method="POST" target="NewSmallWindow">
  <input type="hidden" name="customerCode"/>
</form>
<a href="javascript:fl_showDetail('012345')">012345</a><br/>
<script type="text/javascript">
function fl_showDetail(customerCode){
    var formObj = document.JumpToDetailInfoForm;
    window.open("about:blank", formObj.target, "width=400,height=300,status=no,toolbar=no");
    formObj.customerCode.value = customerCode;
    formObj.submit();
}
</script>

●TEXTAREAのカーソル位置に文字を追加する(IE限定)
JavaScriptには、TEXTAREAの現在カーソルがある位置を知る標準的な方法は用意されていませんが、 IE限定なら、以下のリンクにある裏技（すげー大技ですね）で、実現することができます。
How can I insert text at the caret(cursor) position of a text field/text area?
そのページに掲載されている通りのサンプルはこちらです。

●タイマーを使う

<html><body>
<script language="JavaScript">
<!--
var id;
function timeoutCmd(){ alert("5秒経過しました。" + id); }
function startTimer(){ id = setTimeout("timeoutCmd()", 5000); }
//-->
</script>

<input type=button value="OK" onClick='startTimer()'>

</body></html>

タイマーをセットするには、setTimeout()関数を使います。 この関数はタイマーIDを返すので、途中でキャンセルするには、 clearTimeout(id)関数をコールします。 なお、何度も繰り返し同じ処理をタイマーで呼び出す場合は、 setTimeout()の代わりにsetInterval()という関数が使えます。

●JavaScriptのwith構文の使い方

function linkSubmit(url) {
  with(document.menuForm){
    action = url;
    method = "POST";
    submit();
  }
}

●入力欄からフォーカスが離れると入力内容を英大文字に自動変換する
小文字の場合は toLowerCase() を同様に使います。 

<input type="text" name="text1" onChange="this.value=this.value.toUpperCase()"/>

●入力欄の末尾の文字の後ろにカーソルを設定する
業務システムで機械的に入力されるオペレータの方に、 よくこういう要望をされることがあります。 

var obj = document.form1.text1;
var range = obj.createTextRange();
range.move('character', obj.value.length);
range.select();

なお、このrange.moveの2番目の引数に任意の数字を指定すれば、ｎ文字目にカーソルを設定する、 ということもできます。

●入力欄の値を選択状態（反転表示）にする
1つでもキーを押したくない高齢のオペレータの方からは、こういう要望もあります。 また別の要望として、バーコードリーダで値を読ませる際に、 選択状態にしておけば値を消しつつ別の値を読ませることができるから便利ということもありました。 

var obj = document.form1.text1;
obj.select();
obj.focus();

●入力文字数が一定に達すると自動的に次の入力欄にフォーカスする
こんな感じになります。まず、入力欄自身の最大文字数つまりmaxlength属性の値は、 getAttribute('maxlength')で取り出せます。
それで現在の入力文字数が最大文字数に達したとき、引数で指定した入力欄にフォーカスを移動させるのは簡単です (下のf_checkTabMoveTo関数)が、次の入力欄を明示的に指定せず、 DOMツリーで「隣り」(次)にいる要素を探して自動的にそれに移ることも可能です (下のf_checkTabMove関数)。 文書の進行方向に向かって隣りにいる要素はnextSiblingで取り出せます(前にいる要素はpreviousSibling)が、 すぐ隣にいる要素がいつでもどのブラウザで読んでもinput要素であるとは限らないので、 do〜whileでinput要素に出会うまでループしてから、focus()で移動します。
なお、onChangeイベントはフォーカスが離れた際に発生するものなので、この目的には使えません。 onKeyUpイベントを使います。 

<script language="JavaScript">
function f_checkTabMoveTo(textObj, nextTextObj){
    if(textObj.value.length == textObj.getAttribute('maxlength')){
        nextTextObj.focus();
    }
}
function f_checkTabMove(textObj){
    if(textObj.value.length == textObj.getAttribute('maxlength')){
        var o = textObj;
        do { o = o.nextSibling;
           } while (o && ! o.tagName || o.tagName.toLowerCase() != "input");
        if (o != null) { o.focus(); }
    }
}
</script>
<form>
入力欄1(1文字)<input type="text" maxlength="1" size="3" name="ran1" tabindex="1"
               onKeyUp="f_checkTabMoveTo(this, this.form.ran2)">
入力欄2(5文字)<input type="text" maxlength="5" size="8" name="ran2" tabindex="2"
               onKeyUp="f_checkTabMove(this)">
入力欄3(8文字)<input type="text" maxlength="8" size="12" name="ran3" tabindex="3">
<input type="submit" value="ok">
</form>

●文字列に含まれる部分文字列を置き換える、または削除する
文字列のreplaceメソッドを使います。 

var s2 = s1.replace(",", "");
var s3 = s1.replace(/,/g, "");

この例は、いずれもs1に含まれるカンマを削除しているものです。 上のように普通の文字列で指定すると、変換対象の文字列が2個所以上あった場合、 最初に出会ったものだけを置き換え(削除)の対象にします。
下のようにPerlのような正規表現を使い、後ろにgオプションを使うと、 カンマが何個あっても全て置き換え(削除)の対象になります。

●ユーザ定義関数(function)の引数に省略時値(デフォルト値)を設定できる？
PHPと異なり、JavaScriptでは、 引数は省略できますが、代わりの省略時値を定義する文法はありません。
では省略したら何が渡されるのかというと、undefinedとゆうものが渡されます。
これは「param == undefined」や「typeof(param) == "undefined"」で検出できますから、 関数冒頭でその場合の値を補う処理を書けば、省略時値を定義するのに類することはできます。

●ラジオボタン・グループの選択された値を得るには
複数のinput type="radio"のラジオボタンに、同じ"name"をつけると、 それらは自動的に排他な選択動作をします。 つまり、他の1つがチェックされると、 今までチェックされていた項目は自動的にチェックoff状態になります。
が、複数のうちどれが選択されているのかを取得する処理は、 うっかりしているとはまります。 

<script type="text/javascript">
function check(formObj){
    var i;
    for(i = 0; i != formObj.favorite.length; i++){
        if(formObj.favorite[i].checked) {
            alert(formObj.favorite[i].value + "が選択されました。");
            break;
        }
    }
}
</script>

<form>
<input type="radio" name="favorite" value="Apple" checked="1" />りんご
<input type="radio" name="favorite" value="Orange" />みかん
<input type="radio" name="favorite" value="Melon" />メロン
<input type="button" value="OK" onClick="check(this.form)" />
</form>

上のように、面倒ですが1項目ずつループで回してcheckedプロパティで確認するのが正解です。 これを 

if(formObj.favorite.value == "Apple"){
    // ...
}

のように書けると大変嬉しいところですが、実はこれが書けないのが落とし穴。

Misc. Topics Top

(first uploaded 2002/10/18 last updated 2010/02/13, URANO398)

楽天モバイル[UNLIMITが今なら1円] ECナビでポインと Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜！


無料ホームページ 無料のクレジットカード 海外格安航空券 解約手数料０円【あしたでんき】 海外旅行保険が無料！ 海外ホテル