在浏览器中覆盖 TAB

发布于 2024-08-15 19:37:37 字数 297 浏览 6 评论 0原文

如果我在输入字段中输入文本并按 ENTER，我所知道的所有浏览器的默认行为都是提交表单，但是如果我在文本区域内按 ENTER添加了新行。

每当我在文本区域内按 TAB 时，有没有办法模仿这种行为（缩进，而不是提交表单）？ Bespin 似乎可以做到这一点，但是在 canvas 元素中。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小…红帽 2024-08-22 19:37:37

我自己没有这样做，但似乎可以覆盖事件处理程序并捕获密钥。请参阅此处。

哦，对于 JQuery 人群来说，甚至还有一个插件。

回复收藏 0 原文

久伴你 2024-08-22 19:37:37

当然有办法。你使用任何js库吗？如果不是，想法只是在 textarea 元素上添加一个 keydown 事件处理程序，检查处理程序中事件的 keyCode 是否等于 9，如果是，则在内容中附加一个“\t”的文本区域。原型片段：

textarea.observe('keydown', function (e) {
  if(e.keyCode==9) {
    e.element().insert("\t");
    e.stop();
  }
}

Of course there's a way. Do you use any js library? If not, the idea is just to add a keydown event handler on the textarea element, check in the handler if the keyCode of the event equals 9, and if so append a "\t" to the content of the textarea. Prototype snippet:

textarea.observe('keydown', function (e) {
  if(e.keyCode==9) {
    e.element().insert("\t");
    e.stop();
  }
}

回复收藏 0 原文

情仇皆在手 2024-08-22 19:37:37

这段代码应该可以工作。

//'index.js' File
var textarea = document.getElementById('note');
textarea.addEventListener('keydown', function (e) {
    if(e.keyCode==9) {
    e.element().insert("\t");
    e.stop();
    }
});

如果您收到“无法读取 null 属性”错误，请执行以下操作：

//'index.js' File v2
function tab() {
    var textarea = document.getElementById('note');
    if(event.keyCode===9) {
        textarea.innerHTML += "\t";
    }
}

HTML 应遵循此要求并如下所示：

<!DOCTYPE html>
<!-- index.html -->
<!-- Don't Mind the other parts like the style and button tags -->
<!-- If you don't get the error mentioned just remove the 'onkeydown="tab()"'. -->
<html onkeydown="tab()">
    <head>
        <title>Calender</title>
        <script src="./index.js"></script>
        <style>
            * {
                background-color: darkgoldenrod;
                color: white;
            }

            textarea {
                background-color: white;
                color: black;
            }

            .newNote {
                background-color: olivedrab;
                color: white;
                border: 1px solid #000000;
                box-shadow: none;
                border-radius: 7.5px;
            }
        </style>
    </head>
    <body>
        <button class="newNote" id="newNote" onclick="Note()">New Note</button>
        <br/>
        <br/>
        <textarea wrap="soft" rows="30" cols="100" id="note"
placeholder="Type a Note Here!" title="Note Box"></textarea>
    </body>
</html>

This code should work.

//'index.js' File
var textarea = document.getElementById('note');
textarea.addEventListener('keydown', function (e) {
    if(e.keyCode==9) {
    e.element().insert("\t");
    e.stop();
    }
});

If you get a 'cannot read property of null' error do this:

//'index.js' File v2
function tab() {
    var textarea = document.getElementById('note');
    if(event.keyCode===9) {
        textarea.innerHTML += "\t";
    }
}

The HTML should follow suit and look like this:

<!DOCTYPE html>
<!-- index.html -->
<!-- Don't Mind the other parts like the style and button tags -->
<!-- If you don't get the error mentioned just remove the 'onkeydown="tab()"'. -->
<html onkeydown="tab()">
    <head>
        <title>Calender</title>
        <script src="./index.js"></script>
        <style>
            * {
                background-color: darkgoldenrod;
                color: white;
            }

            textarea {
                background-color: white;
                color: black;
            }

            .newNote {
                background-color: olivedrab;
                color: white;
                border: 1px solid #000000;
                box-shadow: none;
                border-radius: 7.5px;
            }
        </style>
    </head>
    <body>
        <button class="newNote" id="newNote" onclick="Note()">New Note</button>
        <br/>
        <br/>
        <textarea wrap="soft" rows="30" cols="100" id="note"
placeholder="Type a Note Here!" title="Note Box"></textarea>
    </body>
</html>

回复收藏 0 原文

~没有更多了~