firefox在输入时更改文本区域的高度不起作用

firefox change height of textarea on enter not working

本文关键字：区域 高度 不起作用 文本 输入 firefox      更新时间：2023-09-26

当用户点击回车键时，我一直在尝试更改文本区域的高度，这样他们就不必滚动了。我可以在IE和Chrome上管理它，但我不能在Firefox上运行。请看一下我的代码。我真的是个新手。它似乎不认识这个事件，我也不知道该怎么办。这是我的代码：

<form id="blog-comment-form" method="post" action="index.php">
<textarea id="comment" name="b_com" onkeyup="showmsg()"  placeholder="ADD YOUR COMMENT HERE"></textarea>
<input type="submit" name="submit" value="POST COMMENT"/>
</form>

我从一个外部文件调用函数。我的javascript代码：

function showmsg() {
    if(!event){
           event= window.event;}
    if (event.keyCode==13) {
        var a = document.getElementById("comment");
    var b = document.getElementById("comment").style.scrollHeight;
    a.style.height = ((a.scrollHeight)+6) + "px"; 
}else {
    var a = document.getElementById("comment");
    var b = document.getElementById("testthis").style.height;
    a.style.height = ((a.scrollHeight)+6) + "px"; 
}
}

谢谢

写这个：

function showmsg(event) {

代替：

function showmsg() {

与

写这个（在HTML标记中）：

onkeyup="showmsg(event)"

代替：

onkeyup="showmsg()"

您需要将rows属性添加到文本区域。这将帮助您增加文本区域的高度

您可以用不同的方式监听keyup事件，而不是使用onkeyup属性，这也将为您创建事件对象：

document.getElementById('comment').addEventListener('keyup', showmsg);

一个工作示例：http://jsfiddle.net/rotev/FKDVD/1/

在Firefox和Chrome上测试。

您的代码出现了一些问题。在某些浏览器上，您的事件处理可能无法正常工作。

因此，首先，您需要从回调本身获取事件，而不是使用名为event的全局变量。

要调整文本区域的大小，可以使用属性列和行。

要处理该事件，可以通过以下方式附加回调：

function init(){
    var e = document.getElementById("comment");
    e.onkeyup = showmsg;
}

有关事件侦听器的更多信息，请查看此内容。要调整文本区域的大小，可以使用行：

function showmsg(event) {
    if (event.keyCode==13) {
        var a = document.getElementById("comment");
        a.rows++;
    }
}

要调用init，您可以将其与元素体关联：

<body onload="init()">

最后的代码看起来像：

<html>
<head>
<script>
function init(){
    var e = document.getElementById("comment");
    e.onkeyup = showmsg;
}
function showmsg(event) {
    if (event.keyCode==13) {
        var a = document.getElementById("comment");
        a.rows++;
    }
}
</script>
</head>
<body onload="init()">
<form id="blog-comment-form" method="post" action="index.php">
<textarea id="comment" name="b_com" placeholder="ADD YOUR COMMENT HERE"></textarea>
<input type="submit" name="submit" value="POST COMMENT"/>
</form>
</body>
</html>
相关文章：