关于如何实现textarea接受Tab键输入

最新推荐文章于 2022-12-21 14:21:27 发布
最新推荐文章于 2022-12-21 14:21:27 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dong1528313271/article/details/104436346
版权
在默认情况下，网页上的Tab键用于切换控件焦点。要让textarea接受Tab键输入，可以监听textarea的onkeydown事件，捕获Tab键（键码9），并插入 或空格。需要注意在处理完事件后恢复焦点，且页面需有两个以上控件以防止焦点丢失。这个解决方案适用于markdown到HTML转换的场景，例如使用marked库。
摘要由CSDN通过智能技术生成

实现textarea接受Tab键的输入

首先我们需要知道，在一般情况下网页上按Tab键是切换控件焦点的。在textarea里也是这样，那么当我们需要在文本框里输入Tab的时候，应该怎么办呢？

首先我们想到直接看一下 textarea 标签是否有控制Tab的属性
没得，好了，下一个。

我的解决方案：

我们可以通过textarea对象捕捉键盘事件，过滤Tab键，然后悄悄把他的处理方式从切换焦点改成插入文本\t（或者4个或8个空格）不就ok了。相当简单。
ps：键盘上的Tab对应码是9。

然后开始行动：
直接给代码吧，有点懒了（很简单）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>md转换为html</title>

</head>

<body>
      <script src="https://cdn.bootcss.com/marked/0.8.0/marked.js"></script>
      <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
      <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
      <script>hljs.initHighlightingOnLoad();</script>
      <script type="text/javascript">
        var rendererMD = new marked.Renderer();
        marked.setOptions({
   
          renderer: rendererMD,
          gfm: true,
          tables: true,
          breaks: false,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false
        });
        marked.setOptions({
   
        highlight: function (code) {
   
        return hljs.highlightAuto(code).value;
      }
    });



        function insertText
最低0.47元/天 解锁文章
纵使微芒如烟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何做一个高级的文本编辑器 textarea，拥有快捷键操作
学习笔记
03-06 845
最近想做一个高级点的textarea一步一步来，你需要知道一些关于 input textarea 的基础知识。
JavaScript让Textarea支持tab按键的方法
10-24
主要介绍了JavaScript让Textarea支持tab按键的方法,涉及javascript针对textarea实现响应tab按键的方法,需要的朋友可以参考下
html 让textarea支持tab键输入，而不是切换焦点
weixin_56179997的博客
07-27 622
function initTextAreaTab(textarea, spaceCount = 8){ var func = function(e){ if(event.code !== "Tab") return true; event.preventDefault(); let start = this.selectionStart; ...
html textarea tab,JavaScript让Textarea支持tab按键的方法
weixin_39947306的博客
06-16 183
HTMLTextAreaElement.prototype.getCaretPosition = function () {//return the caret position of the textareareturn this.selectionStart;};HTMLTextAreaElement.prototype.setCaretPosition = function (positio...
怎样在textarea中输入tab
PowerJ的博客 希望对你有帮助
12-11 4534
怎样在textarea中输入tab在网面上按tab键，会默认切换鼠标焦点，我们只要在这个默认事件发生之前来阻止就可以了。 本例使用了Vue和IView， 但是主要部分用js就可以 html<Input @on-keydown="textareaTab" name="content" v-model="textareValue" type="textarea" :rows="4" ></Input
使textarea支持tab键
weixin_30664539的博客
07-18 221
默认情况下，tab键是自动聚焦在下一个可以聚焦的元素上，那么当我们在teatarea 中写文字时，需要使用tab键来空格，那怎么办，总不能一直敲空格吧！解决的方法就是捕捉发生在textarea上面的keydown事件，阻止其默认行为，代码如下 $("textarea").on('keydown',function(e){ if(e.keyCode == 9){ e...
javascript实现textarea中tab键的缩排处理方法
10-24
为了解决这个问题，我们可以使用JavaScript来实现textarea中的Tab键缩进处理。 首先，我们需要监听textarea元素的键盘事件，特别是`keydown`事件，因为我们需要在用户按下Tab键时进行处理，而不是在键被释放时。在...
在textarea输入Tab
12-09
在探讨“在textarea输入Tab”这一主题时，我们需要深入了解HTML中的`<textarea>`元素以及如何通过JavaScript来控制或模拟Tab键的行为。以下是对这一知识点的详细解析。 ### 一、`<textarea>`元素简介 #### 1.1 ...
让TextArea支持Tab键（兼容IE、FF）
清风的专栏
04-24 1712
显示列表  让TextArea支持Tab键（兼容IE、FF）2009-03-28<br />http://www.huanghengxu.com/Html/Article/125.htm<br /><br /><br /> <script language="JavaScript"> <br /> <!-- <br /> var TextAreaTab = <br /> { <br />    Register : function(obj) <br />    { <br /
使textarea支持tab缩进
06-17 274
//textarea支持tab缩进 $("textarea").on( 'keydown', function(e) { if (e.keyCode == 9) { e.preventDefault(); ...
indent_helper:在 textarea 元素中使用 tab 键缩进
06-23
缩进助手 在 textarea 选择器上使用 tab 键缩进 单行/多行的缩进/取消缩进 IE 尚不支持 用法 以下示例的所有结果都是相同的。 IndentHelper.addEventListener var targetElement = document.getElementById('some_textarea'); IndentHelper.addEventListener(targetElement); // or IndentHelper.addEventListener(targetElement, 'keydown'); IndentHelper.eventListener var targetElement = document.getElementById('some_textarea'); targetElement.addEventListener('ke
textarea中在光标后输入tab键的方法
Coding
08-16 2914
var myInput = document.getElementById("myInput"); str = " "; if(myInput.addEventListener ) { myInput.addEventListener('keydown',this.keyHandler,false); } else if(myInput.attachE
vue inpute textarea 支持录入tab键，以及在input光标后追加内容
dangsh_的博客
07-05 1773
遇到一个需求 需要在textarea中支持tab键的输入 但是在浏览器中，默认tab键是自动聚焦在下一个可以聚焦的元素上 思路如下： input中接收到tab键时，阻止默认事件 在input中获取到光标位置，在后面加一个 \t 制表符 input获取焦点 代码如下 <el-form-item label="活动名称"> <el-input id="myinput" type="textarea" v-model="form.content" :auto
解决：＜textarea＞中tab键不追加表格符，而是切换焦点？
学习使我快乐_玉祥
12-21 267
给你的文本框添加上tab键的按键监听。
解决tab键对textarea操作无效
衣乌安、随笔
09-21 1525
&lt;body&gt; &lt;textarea placeholder="sss" id="t" class="tabIndent" &gt; &lt;/textarea&gt; &lt;input type="text"&gt; &lt;/body&gt; 注意　要加　class="tabIndent"
textarea中tab键的缩排处理
jcwKyl的专栏
01-21 4398
原文出处：http://www.blueidea.com/tech/web/2003/1131.asp网上搜索了一下相关的解决方法，其它的有使用两三行javascript解决的，但都有一些小小的问题。还有使用JQuery的，也非常简洁。本文的javascript代码实现了在TEXTAREA中输入TAB键并自动缩进的功能。不过这段代码在谷歌浏览器中不能正常执行，在sel =event.srcElem
html输入框tab事件,javascript textarea 中如何实现输入tab键
weixin_28930033的博客
06-04 968
实现areatext输入tab键。(替换成4个空白字符);我的方法是检测输入的字符编码，如果==9的话就替换成“ ”，但是没有效果，不知道问题是出在哪里了。代码如下：/*** Created by luojw on 2017-3-9.*/var textbox = document.getElementById("input"),inputData,dataArr,keyCode;//事件对...
html文本框打tab,HTML标签textarea支持tab键
weixin_34778803的博客
06-03 507
码农很需要的,让textarea支持tab键HTML#require void main() {printf("hello world!\n");}jQuery$(".Jmarkdown").keydown(function(e){if (e.keyCode == 9) {var start = this.selectionStart;var end = this.selectionEnd;// ...
实现回车Tab键等效
最新发布
05-31
您可以使用JavaScript来实现回车和Tab键的等效。以下是一个示例代码： ```javascript function handleKeyPress(e) { var key = e.keyCode || e.which; if (key == 13 || key == 9) { // 13代表回车键，9代表Tab键 e.preventDefault(); // 阻止默认行为 var target = e.target; var value = target.value; var startIndex = target.selectionStart; var endIndex = target.selectionEnd; target.value = value.substring(0, startIndex) + (key == 13 ? "\n" : "\t") + value.substring(endIndex); target.selectionStart = target.selectionEnd = startIndex + 1; } } ``` 您可以将此函数绑定到您想要实现回车和Tab键等效的元素上，例如： ```html <textarea onkeypress="handleKeyPress(event)"></textarea> ``` 这样，每当用户在文本框中按下回车或Tab键时，函数将在文本框中插入相应的字符并将光标移至下一行或下一列。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值