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

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

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

calculator.html

<input type="number" id="calc" placeholder="focus here !" readonly="readonly" />

<debug style="margin:2px;padding:2px;display:none;font-family:monospace;border:solid 1px gray;"></debug>

<style>
	#calculator input[type="button"].close{
		width: 18px;
		background-color: gainsboro;
		border-radius: 4px;
		border: solid 1px dimgray;
	}
	#calculator input[type="button"]{width:32px;height:20px;border:none;padding:0;}
	#calculator .calculator_control input[type="button"]{background-color:red;}
	#calculator input[type="text"]{width:120px;text-align:right;}
}
</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" value="0" />
	<input type="button" value="×" onclick="closecalc();" class="close" />
	<div class="calculator_control">
		<input type="button" value="mc" onclick="clr();" />
		<input type="button" value="c" onclick="clrall();" />
		<input type="button" value="M+" onclick="memPlus();" />
		<input type="button" value="MR" onclick="memRem();" />
	<!--
		<input type="button" value="calc" onclick="calc(document.getElementById('ans'));" />
	-->
	</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="calculator();" />
	<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	target='';
	var	memory=0;

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

	function memPlus(){
		memory+=parseFloat(document.getElementById('ans').value);
	}
	function memRem(){
		tmp=memory;
		document.getElementById('ans').value=memory;
	}
	function num(val)
	{
		if(val!='.' && (document.getElementById('ans').value=='0' || op)){
			document.getElementById('ans').value=val;
		}else{
			document.getElementById('ans').value+=val.toString();
		}
		tmp=parseFloat(document.getElementById('ans').value);
	}
	function opr(val)
	{
		calculator();

		op=val;
		if(ans==0){
			ans=tmp;
		}
		tmp=0;
	}
	function clr()
	{
		tmp=0;
		memory=0;
		document.getElementById('ans').value='0';
	}
	function clrall()
	{
		ans=0;
		tmp=0;
		op='';
		document.getElementById('ans').value='0';
	}
	function calculator()
	{
		switch(op){
		case '+':	ans+=tmp;	break;
		case '-':	ans-=tmp;	break;
		case '*':	ans*=tmp;	break;
		case '/':	ans/=tmp;	break;
		default:	ans=tmp;	break;
		}
		document.getElementById('ans').value=ans;
		target.value=ans;
	}
	function closecalc()
	{
		document.getElementById('calculator').style.display='none';
		clrall();
	}