7

私はWebベースのコードエディタを作成しており、テキスト編集にテキストエリアを使用しています。タブを押しても要素の焦点がぼけないように、テキストエリアにタブサポートを追加したいと思います。私は次のように定義されたtextareaを持っています：

<textarea id="codeEdit_txt" rows="50" cols="80" onkeydown="return codeEdit_keyDown(event);">

および関数codeEdit_keyDownは次のように定義されます。

function codeEdit_keyDown(e) {
    if (e.keyCode == 9) {
        return false;
    }
}

これにより、タブ文字が残されることはありませんが、タブキーを押してもテキスト領域の焦点がぼけることはありません。最初にこれを機能させようとしていたときに、以下のように関数を定義すると、カーソル位置にタブ文字が配置されることに気付きました。

function codeEdit_keyDown(e) {
    if (e.keyCode == 9) {
        alert("");
        return false;
    }
}

私の2つの質問は次のとおりです。

  1. アラートを追加するとタブが追加されるのはなぜですか？
  2. カーソル位置を見つけることなく、カーソル位置にタブを追加し、テキストをtexareaで分割し、手動でタブ文字を追加する方法はありますか（ユーザーがタブを押すたびにアラートを出す必要はありません）？

ありがとう

編集：これはChromeでのみ機能し、IE、Safari、Firefoxでは機能しないようです

4

2 に答える 2

5

この質問を参照してください：

https://stackoverflow.com/a/13130/420001

あなたが探しています.preventDefault();

編集：フィドル。

編集2：raineccのおかげで、より良いフィドル。

于 2012-05-04T21:17:35.160 に答える
2

もう1つの答えはいいですが、最後にタブを終了します。カーソル位置にタブを追加する方法を調べ、それをソリューションに追加しました。

ここで動作するコードを見つけることができます：http：//jsfiddle.net/felixc/o2ptfd5z/9/

セーフガードとしてインラインでコーディングする：

		function insertAtCursor(myField, myValue) {
			//IE support
			if (document.selection) {
				myField.focus();
				sel = document.selection.createRange();
				sel.text = myValue;
			}
			//MOZILLA and others
			else if (myField.selectionStart || myField.selectionStart == '0') {
				var startPos = myField.selectionStart;
				var endPos = myField.selectionEnd;
				myField.value = myField.value.substring(0, startPos)
					+ myValue
					+ myField.value.substring(endPos, myField.value.length);
				myField.selectionStart = startPos + myValue.length;
				myField.selectionEnd = startPos + myValue.length;
			} else {
				myField.value += myValue;
			}
		}	

		function addTabSupport(elementID, tabString) {
			// Get textarea element
			var myInput = document.getElementById(elementID);

			// At keydown: Add tab character at cursor location
			function keyHandler(e) {
				var TABKEY = 9;
				if(e.keyCode == TABKEY) {
					insertAtCursor(myInput, tabString);
					if(e.preventDefault) {
						e.preventDefault();
					}
					return false;
				}
			}			

			// Add keydown listener
			if(myInput.addEventListener ) {
				myInput.addEventListener('keydown',keyHandler,false);
			} else if(myInput.attachEvent ) {
				myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
			}
		}
    
    // easily add tab support to any textarea you like
    addTabSupport("input", "\t");
<h1>Click in the text and hit tab</h1>

<textarea id="input" rows=10 cols=50>function custom(data){
	return data;
}</textarea>

于 2020-06-07T17:02:21.637 に答える