在文本区域中按下回车键

33

我有一个textarea,当在 textarea中按下每个Enter键时,我想要以符号 (*) 开始新的一行。如何操作?

请不要使用jQuery。

我可以观察 Enter 键吗,之后呢?我需要获取整个textarea的值并在其后附加 *,再重新填充 textarea吗?


根据下面的提示,我找到了解决方案。 - sat
5个回答

33
你可以像这样做:
<body>

<textarea id="txtArea" onkeypress="onTestChange();"></textarea>

<script>
function onTestChange() {
    var key = window.event.keyCode;

    // If the user has pressed enter
    if (key === 13) {
        document.getElementById("txtArea").value = document.getElementById("txtArea").value + "\n*";
        return false;
    }
    else {
        return true;
    }
}
</script>

</body>

虽然按回车键时产生的换行符仍将存在,但这是开始实现您想要的内容的一种方式。


6
这只在IE浏览器中起作用:其他浏览器不支持window.event - Tim Down
Doug Crockford 告诉我要告诉你使用 === 而不是 ==。 - MrBoJangles
如果你写了onkeypress="return onTestChange();",那么原始的换行符将被省略。 - MaksymB
1
如果你按下回车键后,在该行之后已经存在一行或多行,这样做并不是很有用。它最终会删除新行之后的所有行。 - Johann
为了在现代浏览器中使用,请将 onkeypress="onTestChange();" 替换为 onkeypress="onTestChange(event);",并将 function onTestChange() { 替换为 function onTestChange(e) {,将 var key = window.event.keyCode; 替换为 var key = e.keyCode - Ethan O'Brien

17

只需将此标签添加到您的文本区域即可。

onkeydown="if(event.keyCode == 13) return false;"

1
也许你可以进一步阐述这个答案。它似乎不起作用。 - swdev

8

您需要考虑用户在文本中间按下回车键的情况,而不仅仅是在结尾处。我建议在keyup事件中检测回车键,并使用正则表达式确保值符合您的要求:

<textarea id="t" rows="4" cols="80"></textarea>
<script type="text/javascript">
    function formatTextArea(textArea) {
        textArea.value = textArea.value.replace(/(^|\r\n|\n)([^*]|$)/g, "$1*$2");
    }

    window.onload = function() {
        var textArea = document.getElementById("t");
        textArea.onkeyup = function(evt) {
            evt = evt || window.event;

            if (evt.keyCode == 13) {
                formatTextArea(this);
            }
        };
    };
</script>

这行代码是用来做什么的?evt = evt || window.event; - Fifi
@Fifi:这是针对旧版本的Internet Explorer(8及以下版本,我想)而言的,它们没有将事件作为参数传递给事件处理程序,而是使用全局的window.event。现在已经不再需要了。 - Tim Down

3

我的情景是,当用户在文本区域中输入时按下回车键,我必须包含一个换行符。我使用以下代码实现了这一点......希望能帮助到某些人......

function CheckLength()
{
    var keyCode = event.keyCode
    if (keyCode == 13)
    {
        document.getElementById('ctl00_ContentPlaceHolder1_id_txt_Suggestions').value = document.getElementById('ctl00_ContentPlaceHolder1_id_txt_Suggestions').value + "\n<br>";
    }
}

1
你可以这样做:

$("#txtArea").on("keypress",function(e) {
    var key = e.keyCode;

    // If the user has pressed enter
    if (key == 13) {
        document.getElementById("txtArea").value =document.getElementById("txtArea").value + "\n";
        return false;
    }
    else {
        return true;
    }
});
<textarea id="txtArea"></textarea>


2
他说不用jQuery。 - Charly.Org

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接