我正在尝试制作一个自动缩进的文本区域，到目前为止它可以使用以下代码。我遇到的问题是，我目前正在阻止默认操作，即按 enter 键计算行中的制表符，然后再插入换行符。
这行得通，但我想要文本区域的默认操作，因为如果你按住回车键，它不会滚动文本区域，直到插入符号到达底行，然后滚动条与插入符号一起停留在最下面一行。如果在文本区域的任何地方使用，下面的当前代码会使插入符保持在视野中，但它会导致插入符上方的内容向上滚动，这是一种妥协，因为插入符不再消失。如果没有其他解决方案，这会很好，但我希望有其他想法。
var start = this.selectionStart-1;
var end = this.selectionEnd;
var sT = this.scrollTop;
var sH = this.scrollHeight;
var vH = $(this).height();
var x = (sH - sT) - vH;
// Check if hitting enter on the first line as no newline will be found
if (this.value.lastIndexOf('\n',start)==-1)
var startSubstr = 0;
else
var startSubstr = this.value.lastIndexOf('\n',start)+1;
var endFirst = end - startSubstr;
var valueToScan = this.value.substr(startSubstr,endFirst);
var count = 0;
// Count only \t at the beginning of the line, none in the code
while (valueToScan.indexOf('\t')!=-1) {
if (valueToScan.indexOf('\t')!=0)
break;
count++;
valueToScan = valueToScan.substr(valueToScan.indexOf('\t')+1);
}
// Command to isert the newline, and then add the \t's found in previously
$(this).insertAtCaret('\n');
for (var i=0;i<count;count--) {
$(this).insertAtCaret('\t');
}
var sH = this.scrollHeight;
this.scrollTop = (sH - x) - vH;
编辑 作为更新，为了消除任何混淆，我正在尝试创建一个 IDE 样式的文本框，例如在大多数 IDE 中，如果您键入以下内容
function example(whatever) {
Example Stuff // And then hit enter here
我希望它会将您带到与“Example Stuff”左边框相同的制表符距离，以便让您的代码更易于阅读。我目前拥有该功能，但问题是我正在拦截回车键，这意味着我必须提供该功能。我很难复制在光标到达底部边框之前不滚动文本框的确切功能。所以，如果你在文本区域的顶部按住 enter，光标只会向下滚动文本区域，移动任何文本直到它到达底部边框，然后文本区域的滚动条将跟随光标。有道理吗？
EDIT 2 更新标签以指示代码使用 PHP
在这篇文章发布期间，我一直在做这件事。我认为当我有机会时我将探索的另一种选择是，与其阻止输入，不如允许默认操作，即按输入并从 lastIndexOf('\n')-1 中读取字符串到最近的 \n 对于任何 \t。我认为这会给我正在寻找的字符串，但不会弄乱文本区域的行为。待测试后再更新。
EDIT 3 已解决，根据我之前的更新，我决定在按下键后扫描字符串，保留自然行为(下面为感兴趣的人添加的部分更改)和唯一真正的问题剩下的是，如果您按住 enter，它不会计算从 enter press 的原点开始的缩进，这对我来说很好。我打算把这个交给 http://stackoverflow.com/users/15066/matyr'>matyr，虽然我确实在他回应之前发现他仍然是最接近的。
if (this.value.lastIndexOf('\n',start-2)==-1) {
var startSubstr = 0;
} else {
var startSubstr = this.value.lastIndexOf('\n',start-1)+1;
}
var valueToScan = this.value.substr(startSubstr,start);
最佳答案
I want to have the default action of the textarea
如何绑定(bind)到 keyup 而不是 keydown/keypress 并在 native 换行符后插入制表符？
the scroll bar stays with caret at the bottom row
您可以通过恢复 scrollTop 来保留滚动位置。
<!DOCTYPE html>
<title>autoindent example</title>
<textarea id="TA" rows="8"></textarea>
<script>
document.getElementById('TA').addEventListener('keyup', function(v){
if(v.keyCode != 13 || v.shiftKey || v.ctrlKey || v.altKey || v.metaKey)
return;
var val = this.value, pos = this.selectionStart;
var line = val.slice(val.lastIndexOf('\n', pos - 2) + 1, pos - 1);
var indent = /^\s*/.exec(line)[0];
if(!indent) return;
var st = this.scrollTop;
this.value = val.slice(0, pos) + indent + val.slice(this.selectionEnd);
this.selectionStart = this.selectionEnd = pos + indent.length;
this.scrollTop = st;
}, false);
</script>
<p>(not considering IE here)
关于php - "Smart"文本区域自动缩进，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3445276/