[JavaScript] よく使う JavaScript サンプル

この記事は3年以上前に書かれた記事です。情報が古い可能性があります。

よく使う JavaScript のサンプル。

1 フォーカスが当たると文字が消える
2 submit でボタンを無効にする
3 選択文字列をタグで括る
4 入力フィールドをクリアする
5 submit 時にタグを decode
6 改行挿入
7 数値チェック
8 スクリプトで画像の上下を反転させる
9 IEか否かの最も簡単な判定

フォーカスが当たると文字が消える

JavaScript

function removeText(formName,elementName){
    var target = document.forms[formName].elements[elementName];
    if(target.value == target.defaultValue){
        target.value = "";
        target.style.color='#000000';
    }
}

function insertText(formName,elementName){
    var target = document.forms[formName].elements[elementName];
    if(target.value == target.defaultValue || target.value == ""){
        target.value = target.defaultValue;
        target.style.color='#999999';
    }
}

HTML 記述例

<html>
    <head>
        <title>sample</title>
        <script type="text/javascript" src="focusinput.js"></script>
    </head>
    <body>
        <form name="form1">
            <input type="text" size="50" name="input1" onfocus="removeText(this.form.name,this.name);" 
            onblur="insertText(this.form.name,this.name);" maxlength="256" value="入力してください" style="color: #999999;">
        </form>
    </body>
</html>

submit でボタンを無効にする

ボタン二重押しの防止。

var DisableSubmit = {
    init: function() {
        this.addEvent(window, 'load', this.onLoad());
    },
    
    onLoad: function() {
        var self = this;
        return function () {
            for (var i = 0; i < document.forms.length; ++i) {
                var elements = document.forms[i].getElementsByTagName('input');
                if (!elements || elements.length == 0) {
                    continue;
                }
                self.setDisable(elements, false);
                self.addEvent( document.forms[i], 'submit', self.onSetDisable(elements, true) );
            }
        }
    },
 
    setDisable: function(elements, flag) {
        for (var i = 0, element; element = elements[i]; i++) {
            if (element.type == 'submit') {
                element.disabled = flag;
            }
        }
    },
    
    onSetDisable: function(elements, flag) {
        var self = this;
        return function () {
            self.setDisable(elements, flag);
            // see: http://support.microsoft.com/kb/890981/ja
            if (isIE && elements && elements.length > 0) {
                for (var j = 0; j < elements.length; j++) {
                    if (elements[j].type.toLowerCase() == 'file') {
                        self.onCancel();
                        break;
                    }
                }
            }
        }
    },
    
    onCancel: function() {
        var self = this;
        window.setTimeout(function() {
            for (var i = 0; i < document.forms.length; ++i) {
                var elements = document.forms[i].getElementsByTagName('input');
                if (!elements || elements.length == 0) {
                    continue;
                }
                self.setDisable(elements, false);
            }
        }, 1000);
    },
    
    addEvent: function(element, type, event) {
        if(element.addEventListener) {
            element.addEventListener(type, event, false);
        } else if(element.attachEvent) {
            element.attachEvent('on'+type, event);
        } else {
            element['on'+type] = event;
        }
    },
    
    removeEvent: function(element, type, event) {
        if(element.removeEventListener) {
            element.removeEventListener(type, event, false);
        } else if(element.detachEvent) {
            element.detachEvent('on'+type, event);
        } else {
            element['on'+type] = event;
        }
    }
}
 
DisableSubmit.init();

ただ、このままだと、submit後にページ遷移しないケース（問い合わせダイアログを開いてキャンセルした場合など）でボタンが無効なままなので、onCancel() で元に戻すようにする。

function confirm_msg(msg) {
    if(window.confirm(msg)){ 
        return true;
    }
    if(DisableSubmit){
        DisableSubmit.onCancel();
    }
    return false;
}

選択文字列をタグで括る

選択文字列の取得の仕方がFirefoxとIEとでちょっと違うので、やむを得ず判定を使う。

var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
 
function getAreaRange(obj) {
    var pos = new Object();
    if (isIE) {
        obj.focus();
        var range = document.selection.createRange();
        var clone = range.duplicate();
        clone.moveToElementText(obj);
        clone.setEndPoint( 'EndToEnd', range );
        pos.start = clone.text.length - range.text.length;
        pos.end = clone.text.length - range.text.length + range.text.length;
    } else if(window.getSelection()) {
        pos.start = obj.selectionStart;
        pos.end = obj.selectionEnd;
    }
    return pos;
}
 
function insertTag(textAreaId,tag_st,tag_ed) {
    //var target = document.forms[].elements[];
    //var target = window.opener.document.getElementById(textAreaName);
    var target = document.getElementById(textAreaId);
    if (target == null) 
        return;
    var pos = getAreaRange(target);
    var val = target.value;
    var range = val.slice(pos.start, pos.end);
    var beforeNode = val.slice(0, pos.start);
    var afterNode = val.slice(pos.end);
    var insertNode;
    if (range || pos.start != pos.end) {
        insertNode = '<' + tag_st + '>' + range + '</' + tag_ed + '>';
        target.value = beforeNode + insertNode + afterNode;
    } else if (pos.start == pos.end) {
        insertNode = '<' + tag_st + '>' + '</' + tag_ed + '>';
        target.value = beforeNode + insertNode + afterNode;
    }
}
 
function insertAnchor(textAreaId,url,target) {
    var tag_st = "a href=\"" + url + "\"";
    if (target != null && target != "")
        tag_st = tag_st + " target=\"" + target + "\"";
    var tag_ed = "a";
    insertTag(textAreaId, tag_st, tag_ed);
}

以下は、idが”edit”というテキストエリアにタグを挿入する例。

<html>
    <head>
        <title>sample</title>
        <script type="text/javascript" src="taginsert.js"></script>
        <script type="text/javascript">
            function insertTest() {
                var url = document.frm.url.value;
                var tar = document.frm.target.value;
                insertAnchor('edit', url, tar);
            }
        </script>
    </head>
    <body>
        <form name="frm">
            <textarea id="edit"></textarea><br>
            <input type="text" name="url" size="50">
            <input type="text" name="target" size="12"><br>
            <input type="button" value="挿入" onclick="insertTest()">
        </form>
    </body>
</html>

入力フィールドをクリアする

form の入力フィールド (input) を全て空白にするスクリプト。そんなもん reset で良くね？と思われるかもしれないが、 reset の動作は、クリアするのでなく「初期値」に戻す、のです。なので、もし何かデフォルト値 (defaultValue) があったら、その値が再入力されるので、 reset = 真っ白にする、ということではない。

ということで、クリアするスクリプト。

function clearFilelds() {
    for (var i = 0; i < document.forms.length; i++) {
        var fields = document.forms[i].getElementsByTagName('input');
        if (fields && fields.length > 0) {
            for(var j = 0; j < fields.length; j++) {
                if (fields[j].type.toLowerCase() == "text") {
                    fields[j].value = "";
                }
            }
        }
        var textareas = document.forms[i].getElementsByTagName('textarea');
        if (textareas && textareas.length > 0) {
            for(var j = 0; j < textareas.length; j++) {
                textareas[j].value = "";
            }
        }
    }    
}

submit 時にタグを decode

逆（submit 時にエスケープ）はよくあるけど、これはあんまりない。というか使う機会もあまりないんですが。 submit するときに、エスケープされているタグを元に戻す処理。 WYSIWYG エディタを使ってるシーンなどで欲しくなることがあります。

以下、その処理だけど、途中 IE が分岐してあるのは、%20 というのは半角スペースを表現するコードなんだけど、普通これは 20h に解釈されるべきなのに、 IE ではなぜか A0h で出力している為。

var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
 
function appendEvent(element, type, event) {
    if(element.addEventListener) {
        element.addEventListener(type, event, false);
    } else if(element.attachEvent) {
        element.attachEvent('on'+type, event);
    } else {
        element['on'+type] = event;
    }
}
 
function encodeHTML(val) {
    if (!val) return val;
    var dst = val;
    dst = dst.replace(/&/ig, "&");
    dst = dst.replace(/</ig, "<");
    dst = dst.replace(/>/ig, ">");
    //dst = dst.replace(/"/ig, """);
    dst = dst.replace(/ /ig, " ");
    return dst;
}
 
function decodeHTML(val) {
    if (!val) return val;
    var dst = val;
    dst.replace(/ /ig, " ");
    dst.replace(/"/ig, "\"");
    dst.replace(/>/ig, ">");
    dst.replace(/</ig, "<");
    dst.replace(/&/ig, "&");
    return dst;
}
 
function decodeHTMLForIE(val) {
    if (!val) return ;
    var dst = "";
    for ( var i = 0; i < val.length; i++ ) {
        var c = escape( val.charAt(i) );
        switch ( c ) {
            case '%26': dst = dst + "&"; break;//&
            case '%3C': dst = dst + "<"; break;//<
            case '%3E': dst = dst + ">"; break;//>
            case '%A0': dst = dst + " "; break;// (%20)
            default : dst = dst + val.charAt(i); break;
        }
    }
    return dst;
}
 
function convertDatas() {
    var elements = document.getElementsByTagName('input');
    if (!elements) return;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].type.toLowerCase() == 'text' && elements[i].value) {
            if (isIE) {
                elements[i].value = decodeHTMLForIE(elements[i].value);
            } else {
                elements[i].value = decodeHTML(elements[i].value);
            }
        }
    }
}
 
function getSubmitFunction() {
    return function() {
        convertDatas();
    }
}
 
function initForms() {
    var forms = document.getElementsByTagName('form');
    if (!forms) return;
    for (var i = 0; i < forms.length; i++) {
        appendEvent(forms[i], 'submit', getSubmitFunction());
    }
}
 
function getInitFunction() {
    return function() {
        //initForms();
        convertDatas();
    }
}
 
appendEvent(window, 'load', getInitFunction());

改行挿入

普通の textarea なら Enter キーを押せば改行コードが挿入される。それをボタンなりイベントなりでやるとこういうことになる。

function insertReturn(target, code) {
    if( code != 13 )
        return;
    
    var val = target.value;
    var returnCode = "\n";
    
    if (isIE) {
        var sel = document.selection.createRange();
        sel.text = returnCode;
        sel.select();
    } else {
        var top = target.scrollTop;
        var pos = getAreaRange(target);
        var range = val.slice(pos.start, pos.end);
        var beforeStr = val.slice(0, pos.start);
        var afterStr = val.slice(pos.end);
 
        target.value = beforeStr + returnCode + afterStr;
        target.scrollTop = top;
        target.setSelectionRange(pos.start+1, pos.start+1);
    }
    target.focus();
}

数値チェック

isNaN()の逆。じゃあ !isNaN() で良いじゃないかと。ブラウザや環境によってこのビルトイン関数が使えないみたいなので、正規表現で代替してみた。

function isNum(str) {
    if (!str) {
        return false;
    }
    if ( str.match(/^[+-]?[\d]+$/)
        || str.match(/^[+-]?[\d]+\.[\d]+$/) ) {
        return true;
    }
    return false;
}

スクリプトで画像の上下を反転させる

IE では filter が使えるので、FlipV で反転させる。 Firefox などのモダンブラウザはイメージオブジェクトが使えるので、それを使う。

function flipV(did, iid) {
    var canvasDiv = document.getElementById(did);
    if (!canvasDiv) {
        return ;
    }
    var beforeImage = document.getElementById(iid);
    if (!beforeImage) {
        return ;
    }
    var imgSrc = beforeImage.getAttribute('src');
    beforeImage.remove();
    if (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0) {
        var imgNode = document.createElement('img');
        imgNode.setAttribute('src', imgSrc);
        //imgNode.style.filter = 'FlipH();';
        imgNode.style.filter = 'FlipV();';
        canvasDiv.appendChild(imgNode);
    } else {
        var imgNode = document.createElement('canvas');
        var dc = imgNode.getContext('2d');
        var img = new Image();
        img.src = imgSrc;
        imgNode.width = img.width;
        imgNode.height = img.height;
        dc.rotate(Math.PI);
        dc.translate( -1 * img.width, -1 * img.height);
        dc.drawImage(img, 0, 0);
        canvasDiv.appendChild(imgNode);
    }
}

HTML 記述例

<html>
<head>
<title>flipV</title>
<script type="text/javascript" src="flipv.js"></script>
</head>
<body onload="flipV('canvas1', 'image1')">

<div id="canvas1">
    <img id="image1" src="sample1.jpg">
</div>
 
</body>
</html>

IEか否かの最も簡単な判定

 function isIE() {
     return ( /*@cc_on!@*/false );
 }