7

我正在制作一个基于 Web 的代码编辑器，并且正在使用 textarea 进行文本编辑。我想向 textarea 添加选项卡支持，以便按下选项卡不会使元素失去焦点。我有这样定义的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;
    }
}

我的两个问题是：

  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

另一个答案很好，但它在最后结束了标签。我查找了如何在光标位置添加选项卡，并将其添加到解决方案中。

你可以在这里找到工作代码：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 回答