Question

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

每当我在textarea中按TAB时，有没有办法模仿这种行为（缩进，不提交表单）？ Bespin似乎这样做，但是一个canvas元素。

Answer 1

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

哦，对于JQuery人群，甚至还有一个plugin。

Answer 2

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

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

Answer 3

此代码应该有效。

//'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>

在浏览器中覆盖TAB

3 个答案: