imasara2script: textareaでタブスペースを入力できるようにする

2017年3月18日土曜日

プログラムを書く人にとってはインデントするために必要なタブスペースですが、ブラウザ上でのタブキーの役割はフォーカス移動なので、デフォルト状態ではタブスペースを入力できません。

入力できるようにするサンプルを作成しました。

起動画面

適当な文字を入力して

tabキーを押すとタブスペースが挿入されます。

文字列を選択して

タブキーを押すと選択中の各行にタブが挿入されます。

shiftキーを押したながらタブキーを押すと逆にタブスペースが減ります。

以下ソース

	<html>
	<title>tabスペース</title>
	<body style="overflow:hidden">
	<textarea style="width:100%;height:100%" wrap=off></textarea>
	</body>
	<script>
	resizeTo(300,300)
	onload=function(){
	タブスペース入力可にする(document.getElementsByTagName('textarea')[0])
	}
	タブスペース入力可にする=function(elem){
	elem.onkeydown=function(){
	if(elem.style.imeMode!='active' && event.keyCode!=9){return}
	event.cancelBubble = true
	var r=document.selection.createRange(), str=r.text
	if(event.shiftKey){
	if(str){
	r.text = str.replace(/\n\t\|\n {1,4}/g,'\n').replace(/^\t\|^ {1,4}/,'')
	}else{
	r.moveEnd('character',4)
	r.text = r.text ? r.text.replace(/\t\| +/,'') : ''
	}
	}else{
	r.text = str ? ('\t'+str.replace(/\n/g,'\n\t')) : '\t'
	}
	return false
	}
	}
	</script>
	</html>

imasara2script