个人中心
gpt4 book ai didi

php - "Smart"文本区域自动缩进

转载 作者：塔克拉玛干 更新时间：2023-11-03 05:42:57 26 4
gpt4 key购买 nike

我正在尝试制作一个自动缩进的文本区域，到目前为止它可以使用以下代码。我遇到的问题是，我目前正在阻止默认操作，即按 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/

26 4 0
文章推荐： php - 如何防止 Node.js 将套接字消息拆分为更小的 block
文章推荐： python - 将 2D 列表减少为其唯一元素并保持顺序的算法
文章推荐： algorithm - 3 总和的时间复杂度
文章推荐： PHP - 从递归函数返回数组时出错
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com