「javascript」タグアーカイブ

IEとその他のブラウザでjavascriptの挙動が違う

とあるシステムを構築中にハマった体験を。

javascript内でPHPをパラメタ付きで呼び出すのですが、Firefoxでは正常に動作するも、IE９では正常に動作しない。
パラメタには日本語を含めていました。
なぜ？？？
いろいろと調べた結果、文字コードの問題でした。
HTML,PHP,javascript全てUTF−８で記述しているのですが、パラメタを渡すとSJISとして渡ってしまう。
うーん、metaタグとかscriptタグにcharset=”UTF-8″を付加してるのになぜ。
結局、javascript内で以下のような記述をすることでIE、Firefoxともに同じ動作をするようになりました。
var Str = encodeURIComponent(文字列);
原因がわかるのに、苦労しました(–;)

要素の座標を取得 javascript

javascriptで指定した要素の座標を簡単に取得する方法です。

function getElementPosition(e)
{
    var p = {x:0,y:0};
    if( !e.offsetParent ){
        return p ;
    }
    else{
    }
    p.x = e.offsetLeft;
    p.y = e.offsetTop;
    if(e.offsetParent){
        var pp = getElementPosition(e.offsetParent);
        p.x += PixNum( pp.x );
        p.y += PixNum(pp.y );
    }
    return p;
}
function PixNum(sz)
{
    var s = (sz + “”).replace(/\D/g,””);
    var n = parseInt(s);
    return n;
}

IEとFireFoxではbackgroundcolorの認識が違う

javascriptで背景色で分岐して、処理を行うことしようとしていたのですが、ＩＥだと正常に動作してFireFoxだと指定した条件が無視されるという現象が発生。

if(row.cells.item(x).style.backgroundColor == “#ffdddd”){
　　　　処理Ａ；
}
else{
　　　　処理Ｂ；
}

原因は、firefoxだと、RGB形式で色を指定しないとダメでした。

なので、

if( (row.cells.item(x).style.backgroundColor == “#ffdddd”) ||
(row.cells.item(x).style.backgroundColor == “rgb(255, 221, 221)”) ){
　　　　処理Ａ；
}

とすると正常に動作しました。

Javascript イベントハンドラ　まとめ

javascript のイベントハンドラのまとめたものがほしかったので情報を集めて作成。

《イベントハンドラ一覧》

イベントハンドラ 発生条件
onChange フォーム要素の選択、入力内容が変更された時に発生
onSelect テキストが選択された時に発生
onSelectStart ページ内の要素が選択されようとした時に発生　※IEのみ
onSubmit フォームを送信しようとした時に発生
onReset フォームがリセットされた時に発生
onAbort 画像の読み込みを中断した時に発生
onError 画像の読み込み中にエラーが発生した時に発生
onLoad ページや画像の読み込みが完了した時に発生
onUnload ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生
onClick 要素やリンクをクリックした時に発生
onDblClick 要素をダブルクリックした時に発生
onKeyUp 押していたキーをあげた時に発生
onKeyDown キーを押した時に発生
onKeyPress キーを押してる時に発生
onMouseOut マウスが離れたした時に発生
onMouseOver マウス乗った時に発生
onMouseUp クリックしたマウスを上げた時に発生
onMouseDown マウスでクリックした時に発生
onMouseMove マウスを動かしている時に発生
onDragDrop マウスでドラッグ＆ドロップした時に発生　※NN4のみ
onBlur ページやフォーム要素からフォーカスが外れた時に発生
onFocus ページやフォーム要素にフォーカスが当たった時に発生

getElementById 初歩的なことですが・・・

javascriptのgetElementByIdについてですが、
いくら見直しても、スクリプト内で取得した値をフォームのテキストに反映できない。

なぜ？なぜ？

イライラしてきたところで、getElementByIdをよく見直してみると。
値を表示するテキストにIDが指定してない。
初歩的なことでした。

PHP 別ウィンドウ(window.open)でマルチプロセスの実現

以前、PHP マルチスレッド処理（並行処理）を実行する方法という記事を書きましたが、別ウィンドウを開いてマルチプロセスを実現する方法が分かりました。

それは、ほんと単純なことでした。

セッションを使わない、開始しないだけでした。

セッションを開始すると、セッション情報が保持されるため別ウィンドウを開いたとしても、同じセッションIDを利用する。（たぶん）
その同じセッションIDというのが曲者で、同じセッションIDだと別ウィンドウを開いても同一プロセスとして扱われてしまい、片方のプロセスが終わらないともう一方のプロセスが開始されない。

気づいたときには、「なんだ、そんなことか」と思いました。

javascript 複数のチェックボックスに一括でチェックを入力する

複数のチェックボックスに対して、一括でチェックを入力するチェックボックス


//一括チェックボックス
<input type=”checkbox” name=”allchk_0″ value=”1″ onclick=”allChk0(this.form.allchk_0)” >
//個別チェックボックス
<input type=”checkbox” name=”check1[1]” value=”1″ >
<input type=”checkbox” name=”check1[2]” value=”1″ >
<input type=”checkbox” name=”check1[3]” value=”1″ >
<input type=”checkbox” name=”check1[4]” value=”1″ >
<input type=”checkbox” name=”check1[5]” value=”1″ >
<input type=”checkbox” name=”check1[6]” value=”1″ >
<input type=”checkbox” name=”check1[7]” value=”1″ >
<input type=”checkbox” name=”check1[8]” value=”1″ >
<input type=”checkbox” name=”check1[9]” value=”1″ >
<input type=”checkbox” name=”check1[10]” value=”1″ >
<input type=”checkbox” name=”check1[11]” value=”1″ >
<input type=”checkbox” name=”check1[12]” value=”1″ >
<input type=”checkbox” name=”check1[13]” value=”1″ >
<input type=”checkbox” name=”check1[14]” value=”1″ >
<input type=”checkbox” name=”check1[15]” value=”1″ >
//一括チェック入力script
<script type=”text/javascript”><!–
function allChk0( Obj ) {
flg = Obj.checked;
document.form.elements[‘check1[1]’].checked = flg;
document.form.elements[‘check1[2]’].checked = flg;
document.form.elements[‘check1[3]’].checked = flg;
document.form.elements[‘check1[4]’].checked = flg;
document.form.elements[‘check1[5]’].checked = flg;
document.form.elements[‘check1[6]’].checked = flg;
document.form.elements[‘check1[7]’].checked = flg;
document.form.elements[‘check1[8]’].checked = flg;
document.form.elements[‘check1[9]’].checked = flg;
document.form.elements[‘check1[10]’].checked = flg;
document.form.elements[‘check1[11]’].checked = flg;
document.form.elements[‘check1[12]’].checked = flg;
document.form.elements[‘check1[13]’].checked = flg;
document.form.elements[‘check1[14]’].checked = flg;
document.form.elements[‘check1[15]’].checked = flg;
}
// –></script>

ＰＨＰと連携して一括チェックボックスを使う。

<?php
    //配列を定義
    $str_arr = array(1=>’aaa’,2=>’bbb’,3=>’ccc’,4=’ddd’,5=>’eee’);
?>
//一括チェックボックス
<input type=”checkbox” name=”allchk” value=”1″ onclick=”allChk(this.form.allchk)” />
<?php
//個別チェックボックスを配列より生成
foreach($str_arr as $key => $elemet){
    if($elemnt){
        ?>
        <input type=”checkbox” name=”check1[<?=key?>]” value=”1″ />
        <?php
    }
}
?>
<script type=”text/javascript”><!–
    function allChk<?=$index?>( Obj ) {
        flg = Obj.checked;
        <?php
        foreach($str_arr as $key => $element){
            if($element){
                ?>
                document.form.elements[‘check1[<?=$key?>]’].checked = flg; // ON・OFFを切り替え
                <?php
            }
        }
        ?>
    }
// –></script>

javascript TEXTAREAの入力制限

とあるWEBアプリを構築していたのですが、TABLE内に配置したTEXTAREAがネックになっていました。
なぜかと言うと、入力の時はTEXTAREAタグ内に文字列が表示されるので、何文字・何行あっても枠のサイズは決まっていたのでレイアウトが崩れることはなかったのですが、それを閲覧モードで表示すると文字数・行数によってはレイアウトが大幅に崩れてしまう。
ウィンドウ内の座標をもとに、レイアウトをしているのでTABLE内のレイアウトが崩れると大変なことになるんです。

そこで、TEXTAREAタグの入力制限を設けようと思い四苦八苦。

やっとのことでできました。

続きを読む →

javascriptの限界？？

とあるPHPで表示したWEBページ内の文字をjavascriptで検索するように設定していて、ある行を境に検索できなくなりました。

ページ内検索のjavascirptは以下のとおり。

var fFirst; //はじめかどうかのフラグ
var objRange; //TextRangeオブジェクト
//検索関数
function Start()
{
　　　　objRange = document.body.createTextRange();
　　　　//文字列が空であれば終了
　　　　if (document.search_form.txtWord.value.length == 0)
　　　　{
　　　　　　　　return;
　　　　}
　　　　strCheck = document.search_form.txtWord.value;
　　　　if (fFirst)
　　　　{
　　　　　　　　fFirst = false;
　　　　}
　　　　else
　　　　{ //2度目以降
　　　　　　　　objRange.move(“character”, 1);
　　　　}
　　　　//セレクトする
　　　　if (objRange.findText(strCheck))
　　　　{
　　　　　　　　objRange.select();
　　　　　　　　objRange.scrollIntoView();
　　　　}
}

 

という感じ。

PHPでWEBページを表示しているんですけど、HTMLタグやらでソースは５万行を超える状態。

この５万行が限界らしく５万目は見事に検索されなくなりました。

４９９９９行目までは検索できるんですけど。

どなたか何か情報もってないですか？？