imasara2script: showModalDialogで入力用ウィンドウを表示する

メインウィンドウとは別で小さいウィンドウを表示して、その小さいウィンドウに何か入力するか閉じるかしないとメインウィンドウを操作できない状態にするサンプルを作成しました。

起動画面

「textarea」ボタンを押すと、以下の画面が表示されます。

「F2」キーを押すか、「Esc」キーを押すか、画面右上の「×」ボタンを押すかしないと、メインウィンドウの操作はできません。

「F2」キーを押した場合は、その時に入力されていた文字列がメインウィンドウのテキストエリアに入力されます。

ソース

	<html>
	<style type="text/css">
	li{padding:5px;}
	</style>
	<title>showModalDialog</title>
	<body>
	<ul style="list-style-type:none;">
	<li><button id=btnTA >textarea</button>
	<li><button id=btnSEL>select </button>
	<li><button id=btnIMG>img </button>
	<li><button id=btnKEY>keycode </button>
	</ul>
	<textarea id=ta style="width:100%;height:100px;" wrap=off></textarea>
	</body>
	<script>
	btnTA .onclick=function(){ ta.value = newWindow.textarea('文字列～') }
	btnSEL.onclick=function(){ ta.value = newWindow.sel ([0,1,2,3,4]) }
	btnIMG.onclick=function(){ ta.value = newWindow.img () }
	btnKEY.onclick=function(){ ta.value = newWindow.keycode () }

	fs = new ActiveXObject('Scripting.FileSystemObject')
	gsf2 = fs.GetSpecialFolder(2)
	com = function(fun){return (fun+'').split('/')[1].split('/')[0]}
	Write= function(path, v){with(fs.CreateTextFile(path)){Write(v);Close()}}

	;(function(){
	var pathHTML = gsf2+'/newWindow.html'

	var t = com(function(){/*
	<-html>
	<-head>
	<-title>-title-<-/title>
	<-style type="text/css">
	.max{width:100%;height:100%;}
	.w-max{width:100%;}
	.bc{border-collapse:collapse;}
	.no_mp{margin:0px;padding:0px;}
	.ta-c{text-align:center;}
	.of-auto{overflow:auto;}
	.of-hidden{overflow:hidden;}
	.nowrap{white-space:nowrap;}
	.border1{border:solid 1px #000;}
	.pad5{padding:5px;}
	<-/style>
	<-/head>
	<-body onload="objMain=window.dialogArguments; document.title=objMain.title; document.body.innerHTML=objMain.bodyIH; objMain.onload_?eval('('+objMain.onload_+')()'):0"><-/body>
	<-/html>
	*/}).replace(/<-/g,'<')
	Write(pathHTML, t)

	var openWindow = function(objMain,windowSetting){
	objMain.親win = window
	return window.showModalDialog(pathHTML,objMain,windowSetting)
	}
	newWindow = {
	textarea:function(str){
	var objMain={
	bodyIH:'<textarea id=ta class="max" wrap=off></textarea>',
	onload_:function(){
	ta.value = objMain.str
	ta.select()
	document.body.onkeydown=function(){
	switch(event.keyCode){
	case 113://F2
	window.returnValue = ta.value
	return window.close()
	case 27://Esc
	return window.close()
	}
	}
	document.body.style.overFlow = 'hidden'
	},
	title:'F2：入力完了　Esc:キャンセル',
	str :str
	}
	return openWindow(objMain, 'dialogWidth=600px; dialogHeight=480px; resizable=yes;')
	},
	sel:function(arr){
	var objMain={
	bodyIH:'<select id=sel size=2 class="max" wrap=off multiple></select>',
	onload_:function(){
	var arr=objMain.arr, ops=sel.options, i=0, L=arr.length
	for(;i<L;i++){ ops[i] = new Option(arr[i]) }

	sel.focus()
	document.body.onkeydown=function(){
	switch(event.keyCode){
	case 113://F2
	var arr=[], i=0
	for(;i<L;i++){ if(ops[i].selected){ arr.push(ops[i].text) } }
	window.returnValue = arr
	return window.close()
	case 27://Esc
	return window.close()
	}
	}
	document.body.style.overFlow = 'hidden'
	},
	title:'F2：入力完了　Esc:キャンセル',
	arr :arr
	}
	return openWindow(objMain, 'dialogWidth=600px; dialogHeight=480px; resizable=yes;')
	},
	img:function(){
	var objMain={
	bodyIH:[
	'<table class="max bc">',
	'<tr height=1>',
	'<td>',
	'<table class="w-max bc">',
	'<td><input id=inp class=w-max></td>',
	'<td width=1><button id=btnZ>zoom:off</button></td>',
	'<td width=1><button id=btnW>w:100% </button></td>',
	'<td width=1><button id=btnH>h:100% </button></td>',
	'</table>',
	'</td>',
	'</tr>',
	'<tr><td><div class="max of-auto"><img id=img></div></td></tr>',
	'</table>'
	].join('\r\n'),
	onload_:function(){
	inp.onchange=function(){ img.src = this.value }
	btnZ.onclick = function(){ img.style.width= img.style.height='' }
	btnW.onclick = function(){ img.style.width='100%';img.style.height='' }
	btnH.onclick = function(){ img.style.width=''; img.style.height='100%' }

	inp.focus()
	document.body.onkeydown=function(){
	switch(event.keyCode){
	case 113://F2
	window.returnValue = img.outerHTML
	return window.close()
	case 27://Esc
	return window.close()
	}
	}
	document.body.style.overFlow = 'hidden'
	},
	title:'F2：入力完了　Esc:キャンセル'
	}
	return openWindow(objMain, 'dialogWidth=600px; dialogHeight=480px; resizable=yes;')
	},
	keycode:function(){
	var objMain={
	bodyIH:'<table class=max><td class=ta-c id=td></td></table>',
	onload_:function(){
	document.body.onkeydown=function(){ window.returnValue = td.innerText = event.keyCode }
	},
	title:'このウィンドウは×ボタンで閉じてください'
	}
	return openWindow(objMain, 'dialogWidth=300px; dialogHeight=100px; resizable=yes;')
	}
	}
	})();
	</script>
	</html>

view raw showModalDialog.hta hosted with ❤ by GitHub

imasara2script

2016年8月3日水曜日

showModalDialogで入力用ウィンドウを表示する

0 件のコメント:

コメントを投稿