数値入力を補助するポップアップ電卓

入力欄でテンキーが出てくるなら、計算もできた方が便利だと思う。
そういうのをどこかで見たことがあった気もするけど、覚えてない。
ふと思いついて、ざっくり作ってみた。
使う機会があるなら、組み込み易い形にしたいところ。

calculator.html

<input type="number" id="calc" placeholder="focus here !" readonly="readonly" />
<style>
    #calculator input[type="button"]{width:32px;height:20px;border:none;}
    #calculator .calculator_control input[type="button"]{background-color:red;}
    #calculator input[type="text"]{width:144px;}
</style>
<div id="calculator" style="display:none;position:absolute;top:32px;left:32px;width:146px;height:144px;background-color:white;border:solid 1px gray;border-radius:4px;padding:4px;">
    <input type="text" id="ans" />
    <div class="calculator_control">
        <input type="button" value="c" onclick="clr();" />
        <input type="button" value="ac" onclick="clrall();" />
        <input type="button" value="ok" onclick="closecalc(true);" />
        <input type="button" value="×" onclick="closecalc(false);" />
    </div>
    <input type="button" value="7" onclick="num(this.value);" />
    <input type="button" value="8" onclick="num(this.value);" />
    <input type="button" value="9" onclick="num(this.value);" />
    <input type="button" value="=" onclick="calc();" />
    <br />
    <input type="button" value="4" onclick="num(this.value);" />
    <input type="button" value="5" onclick="num(this.value);" />
    <input type="button" value="6" onclick="num(this.value);" />
    <input type="button" value="/" onclick="opr(this.value);" />
    <br />
    <input type="button" value="1" onclick="num(this.value);" />
    <input type="button" value="2" onclick="num(this.value);" />
    <input type="button" value="3" onclick="num(this.value);" />
    <input type="button" value="*" onclick="opr(this.value);" />
    <br />
    <input type="button" value="0" onclick="num(this.value);" />
    <input type="button" value="." onclick="num(this.value);" />
    <input type="button" value="+" onclick="opr(this.value);" />
    <input type="button" value="-" onclick="opr(this.value);" />
</div>

機能部分

ざっくりなので、細かい使い勝手は適宜改良してくれ。

calculator.js

    var tmp=0;
    var ans=0;
    var op='';
    var point=false;
    var target='';

    window.addEventListener('DOMContentLoaded',function(event){
        document.getElementById('calc').addEventListener('focus',
            function(event){
                target=event.target;
                document.getElementById('calculator').style.display='block';
            },
        false);
    },false);

    function num(val)
    {
        if(val=='.'){
            point=true;
        }else{
            if(point){
                tmp=tmp+parseInt(val)/10;
            }else{
                tmp=tmp*10+parseInt(val);
            }
            document.getElementById('ans').value=tmp;
        }
    }
    function opr(val)
    {
        op=val;
        if(ans==0){
            ans=tmp;
        }
        point=false;
        tmp=0;
    }
    function clr()
    {
        tmp=0;
        document.getElementById('ans').value='0';
    }
    function clrall()
    {
        ans=0;
        tmp=0;
        op='';
        document.getElementById('ans').value='0';
    }
    function calc()
    {
        switch(op){
        case '+':   ans+=tmp;   break;
        case '-':   ans-=tmp;   break;
        case '*':   ans*=tmp;   break;
        case '/':   ans/=tmp;   break;
        }
        document.getElementById('ans').value=ans;
    }
    function closecalc(bool)
    {
        if(bool){
            target.value=ans;
        }
        document.getElementById('calculator').style.display='none';
    }

数値入力用ポップアップ電卓

数値入力を補助するポップアップ電卓

機能部分