テキストエリアでタブ入力

  利用ガイド



  
<SCRIPT 
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/tabtextarea.js">
</SCRIPT>
  

★ TAB のみ挿入する場合
◎ TAB 挿入 TAB キー
◎ TAB 削除 Back Space キー

★ まとめて処理は対象文字列を選択する
◎ TAB 挿入 TAB キー
◎ TAB 削除 SHIFT+TAB キー

IE と Firefox、Netscape、Opera で動作確認しています(Opera は、name 属性が必要です)。


  
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<SCRIPT
	language="javascript"
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/tabtextarea.js">
</SCRIPT>

</HEAD>
<BODY>

<SCRIPT type="text/javascript">
createTabTextArea("sample1");
document.write("<br />");
createTabTextArea("sample2",60,8,"myclass");
</SCRIPT>

</BODY>
</HTML>
  




※ 以下は行番号処理を追加した例です



  コード



  
// tabtextarea.js
// http://hp.vector.co.jp/authors/VA003334/
// 2007/02/04
// 2009/05/04 update

function lboxTextarea( id, a, b ) {

    this.target = document.getElementById(id);
    this.num = null;
    this.num_row = null;
    if ( a != null ) {
        this.num = a;
        this.num_row = b;
        this.target.setAttribute( "num", this.num );
        this.target.setAttribute( "num_row", this.num_row );
    }

    this.sc = function() {
        var obj1,obj2,obj;
        if ( this.target ) {
            obj = this.target;
            obj1 = document.getElementById( this.num );
            obj2 = document.getElementById( this.num_row );
        }
        else {
            obj = this;
            obj1 = obj.getAttribute( "num" );
            obj1 = document.getElementById( obj1 );
            obj2 = obj.getAttribute( "num_row" );
            obj2 = document.getElementById( obj2 );
        }

        var t_num = obj.value.split(/\n/).length;
        var t_str = "";
        var t_i;
        for ( t_i = 0; t_i < t_num + 1; t_i++ ) {
            t_str = t_str + (t_i+1) + "<br>";
        }

        obj2.innerHTML = t_str;

        obj1.scrollTop = obj.scrollTop;
    }

    if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
        this.target.onkeydown = SetTab;
    }
    else {
        this.target.onkeypress = SetTab2;
    }

    if ( a != null ) {
        this.target.onscroll = this.sc;
        if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
            this.target.onkeyup = this.sc;
        }
        else {
            this.target.onmousemove = this.sc;
            this.target.onkeyup = this.sc;
        }
    }
}


// ******************************************************
// tab for textarea ( for IE )
// ******************************************************
function SetTab( ) {

    if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {

        if ( window.event.keyCode != 9 ) {
            return;
        }

        window.event.returnValue = false;

        var objTextArea,objTextRange,nLen,nChars,strData

        objTextArea = document.selection
        objTextRange = objTextArea.createRange( )

        try {
            strData = objTextRange.text
            nLen = strData.length
            if ( window.event.shiftKey ) {
                strData = strData.replace( /\n\t/g, "\n" );
                if ( strData.substr( 0, 1 ) == "\t" ) {
                    strData = strData.substr( 1, strData.length-1 );
                }
            }
            else {
                strData = strData.replace( /\n/g, "\n\t" );
                strData = "\t" + strData
                strData = strData.replace( /\t\r\n/g, "\r\n" );
            }
            if ( nLen == 0 ) {
                objTextRange.text = strData;
            }
            else {
                objTextRange.text = strData + "\n";
            }
        }
        catch( e ) {
        }
    }
    else {
    }

} 

// ******************************************************
// tab for textarea
// Firefox is ok, Opera needs name attribute
// ******************************************************
function SetTab2( evt ) {

    if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {

    }
    else {
        var obj = evt.target;
        if ( evt.keyCode != 9 ) {
            return;
        }

        nStart = obj.selectionStart;
        nEnd = obj.selectionEnd;
        nTop = obj.scrollTop;

        if ( nStart == nEnd ) {
            strValue = obj.value.substring(    0, nStart );
            strValue += "\t";
            strValue += obj.value.substring(nEnd,obj.value.length);
            obj.value = strValue;
            obj.setSelectionRange(nStart+1,nStart+1);
        }
        else {
            if ( evt.shiftKey ) {
                strValue = obj.value.substring(    nStart, nEnd );
                strValue = strValue.replace( /\n\t/g, "\n" );
                if ( strValue.substr( 0, 1 ) == "\t" ) {
                    strValue = strValue.substr( 1, strValue.length-1 );
                }
                nLen = strValue.length
                strValue = obj.value.substring(    0, nStart )
                    + strValue + obj.value.substring(nEnd,obj.value.length);
                obj.value = strValue;
                obj.setSelectionRange(nStart,nStart+nLen);
            }
            else {
                strValue = obj.value.substring(    nStart, nEnd );
                strValue = strValue.replace( /\n/g, "\n\t" );
                if ( strValue.substr( strValue.length-1, 1 ) == "\t" ) {
                    strValue = "\t" + strValue.substr( 0, strValue.length-2 ) + "\n";
                }
                else {
                    strValue = "\t" + strValue;
                }
                strValue = strValue.replace( /\t\n/g, "\n" );

                nLen = strValue.length
                strValue = obj.value.substring(    0, nStart )
                    + strValue + obj.value.substring(nEnd,obj.value.length);
                obj.value = strValue;
                obj.setSelectionRange(nStart,nStart+nLen);
            }

        }
        obj.scrollTop = nTop;

        evt.preventDefault();

        if (window.navigator.appName.toLowerCase().indexOf("opera") > -1) {
            window.setTimeout(
                "document.getElementsByName(\""+ obj.name + "\")[0].focus();", 10
            );
        }
    }
}


function createTabTextArea(name) {

    var scols="60",srows="10",sclass="";

    if ( arguments.length > 1 ) {
        scols = arguments[1];
        if ( scols == "" ) {
            scols = "60";
        }
    }
    if ( arguments.length > 2 ) {
        srows = arguments[2];
        if ( srows == "" ) {
            srows = "10";
        }
    }
    if ( arguments.length > 3 ) {
        sclass = arguments[3];
    }

    var str="";

    str+="<TEXT" + "AREA \n";
    str+="    name=\""+name+"\" \n";
    if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
        str+="    onKeydown='SetTab()' \n";
    }
    else {
        str+="    onKeypress='SetTab2(event)' \n";
    }

    str+=" cols=\""+scols+"\" \n";
    str+=" rows=\""+srows+"\" \n";
    if ( sclass != "" ) {
        str+=" class=\""+sclass+"\" \n";
    }

    str+="></TEXT"+"AREA> ";
    document.write( str );

}
  



  tabvbs.htm

VBScript で記述したものですが、このほうが拡張が簡単な場合もあるので。

呼び出しに language="VBScript" があるので、JavaScript の環境で IE 限定機能 として
追加する事が可能です。


  
<SCRIPT language=VBScript>
' ******************************************************
' テキストエリアのタブ処理
' ******************************************************
function SetTab( )

	if window.event.keyCode <> 9 then
		exit function
	end if

	window.event.returnValue = false

	Dim objTextArea,objTextRange,nLen,nChars,strData

	set objTextArea = document.selection
	set objTextRange = objTextArea.createRange( )
	on error resume next
	strData = objTextRange.text
	nLen = Len( strData )
	if window.event.shiftKey then
		strData = Replace( strData, vbLf & vbTab, vbLf )
		if Left( strData, 1 ) = vbTab then
			strData = Right( strData, Len( strData ) - 1 )
		end if
	else
		strData = Replace( strData, vbLf, vbLf & vbTab )
		strData = vbTab & strData
	end if

	if nLen = 0 then
		objTextRange.text = strData
	else
		objTextRange.text = strData & vbLf
	end if

	on error goto 0

end function 

</SCRIPT>

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
</HEAD>
<BODY>
<TEXTAREA cols=80 rows=20 language="VBScript" onKeydown='Call SetTab()'></TEXTAREA>
<br>
<TEXTAREA cols=80 rows=20 language="VBScript" onKeydown='Call SetTab()'></TEXTAREA>
</BODY>
</HTML>
  











  infoboard   管理者用   
このエントリーをはてなブックマークに追加




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ