在JavaScript中缩小表格

从未使用JavaScript之前和我试图修复此表格在共享点。我想这个文本框很小（如1行），直到用户点击它，然后它应该展开成一个更大的文本框，像10行。我很抱歉，如果这已被回答，我甚至不知道我应该寻找什么。下面是代码，我不工作，但确实弹出错误信息（我没有写这个代码）：在JavaScript中缩小表格

alert(DescriptionID); 
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){ 
    document.getElementById(DescriptionID).rows= "10"; 
}); 
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){ 
    document.getElementById(DescriptionID).rows= "1"; 
});

编辑：这里是什么当前的代码将显示：

EDIT2：感谢您们的帮助，我们即将完成！我现在可以至少明白它的好处了！这是代码的图片。该对象实际上是一个“ms-formbody”？

而另一个编辑：因此，这里是我使用Johhny的代码后，我得到的错误：

来源

2016-06-14 MattCucco

Java和JavaScript不是相同的语言。我会编辑你的问题来反映这一点。这两个人经常感到困惑，所以我想尽我所能传播意识。 –

是不是这个JavaScript？ – MattCucco

如果您希望任何人都能够提供帮助，则可能需要包含错误消息。因为很可能变量DescriptionId设置不正确...... –

如果您正在使用jQuery，这可能会为你工作：

HTML：

的JavaScript：

$(document).ready(function() { 
    $('#expandingTextarea').on('mouseover', function() { 
    $(this).attr('rows', '10'); 
    }); 

    $('#expandingTextarea').on('mouseout', function() { 
    $(this).attr('rows', '1'); 
    }); 
});

我创建了一个例子here。

更新：

使用点击事件改变/切换到行数：

$(document).ready(function() { 
    $('#expandingTextarea').on('click', toggleExpand); 

    function toggleExpand() { 
    var oldRowCount = $(this).attr('rows'); 
    var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1; 
    $(this).attr('rows', newRowCount); 
    } 
});

演示here。

来源

2016-06-14 17:26:01 JohnnyCoder

这正是我想要发生的！现在我只需要弄清楚如何放入我的代码中...... – MattCucco

希望它可以工作，您还可以在此处看到另一个Stack问题：http://stackoverflow.com/q/4417161/1058612。 – JohnnyCoder

我想我可能希望它打开一个点击功能，以便如果用户正在键入并将鼠标从框中弹出，它不会关闭它们。如果用户点击框，它会打开，并且如果再次点击，它会缩小吗？是否可以将函数更改为mousedown？对不起很难！新手在这里！ – MattCucco

改变，而不是“行”属性的高度。

用chrome打开页面，打开开发者工具（View-> Developer-> Developer Tools），然后用“inspect”选择你想要操作的文本区域。

尝试玩弄该元素的CSS。然后，编写你的JavaScript来改变你想要的属性。

https://developer.chrome.com/devtools

来源

2016-06-14 17:12:35

这是一个非常愚蠢的问题，但是您是否知道在g旧Internet Explorer中这样做？在我的公司电脑上，我无法下载其他网络浏览器。我也有Firefox，但它不会让我加载这些东西。 – MattCucco

试图改变我有什么，它没有任何区别 – MattCucco

您显示的代码看起来很好，但DescriptionID应包含描述框的ID。您可以通过右键单击描述表单并单击“检查元素”来检查它是什么。然后在代码的开头分配var DescriptionID =“someID”。另外，你可能会考虑改变高度，而不是行。如果表单没有ID，请查找一个选项来更改HTML并添加一个。如果你没有这样的选择，你仍然可以实现你想做的事情，但你必须超越getElementById。

来源

2016-06-14 17:24:02

事实上，你不需要JS来实现你想要的。 CSS可以为你做。

<!--html--> 
<textarea class="descr">This is description</textarea> 

/*css*/ 
.descr {height: 20px;} 
.descr:hover, .descr:focus {height: 120px;}

来源

2016-06-14 17:24:14

我不知道我将如何实现？你能否给我一个愚蠢的版本？ – MattCucco

但OP要求textarea点击时展开。这仅适用于将鼠标悬停在textarea上的情况。 –

最初它是'mouseover'。确定'.descr：focus'而不是'：hover' –

在JavaScript中缩小表格

回答

相关问题