在 JavaScript 中缩小表格答案

【问题标题】：Shrinking a Table in JavaScript在 JavaScript 中缩小表格
【发布时间】：2016-06-14 17:04:17
【问题描述】：

之前从未使用过 JavaScript，我正在尝试在共享点中修复此表单。我希望这个文本框很小（比如 1 行），直到用户点击它，然后它应该扩展到一个更大的文本框，比如 10 行。如果之前已经回答过这个问题，我深表歉意，我什至不知道我应该寻找什么。这是我的代码不起作用，但会弹出一条错误消息（我没有编写此代码）：

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

编辑：这是当前代码将显示的内容：

编辑2：感谢你们/女孩的大量帮助，我快完成了！我现在至少可以更好地理解它了！这是代码的图片。该对象实际上是一个“ms-formbody”？？？

还有另一个编辑：所以这是我在使用 Johhny 的代码后遇到的错误：

【问题讨论】：

Java 和 JavaScript 不是同一种语言。我将编辑您的问题以反映这一点。这两者经常混淆，所以我想尽自己的一份力量来传播这种意识。
这不是 JavaScript 吗？
如果您希望任何人能够提供帮助，您可能希望包含错误消息。因为很可能变量 DescriptionId 设置不正确...
好吧，我没有收到错误消息。它目前设置为弹出一条消息，我将在几秒钟内发布一个屏幕截图。在这里和我一起裸露，我还不知道我在做什么。
该错误消息实际上不是错误消息。它实际上是由您拥有的代码引起的。 alert(DescriptionID);。它只是用来显示DescriptionID 变量中的内容，即ctl100_PlaceHolderMain.... etc etc.。尝试删除该行，看看它是否有效。如果不是，您的 id 错误。

标签： javascript jquery html css

【解决方案1】：

如果您使用的是 jQuery，这可能对您有用：

HTML：

<textarea id="expandingTextarea" rows="1">Enter Text</textarea>

JavaScript：

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

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

我创建了一个示例here。

更新：

使用 click 事件更改/切换到行数：

$(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.

【讨论】：

这正是我想要发生的事情！现在我只需要弄清楚如何放入我的代码中......
希望它有效，您还可以在此处看到另一个类似的 Stack 问题：stackoverflow.com/q/4417161/1058612。
我想我可能希望它在点击功能上打开，这样如果用户正在打字并将鼠标撞出框外，它就不会关闭它们。如果用户单击框，它会打开，如果他们再次单击，它会缩小，是否可以将功能更改为 mousedown 或类似的方式？不好意思难了！新手来了！
我更新了答案，描述了如何通过单击扩展文本区域。如果此答案对您有帮助，请将其标记为已回答。

【解决方案2】：

其实你不需要JS来实现你想要的。 CSS 可以为您做到。

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

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

【讨论】：

我不确定我将如何实施？你能给我一个简单的版本吗？
但是 OP 在单击时要求扩展文本区域。这仅在您将鼠标悬停在 textarea 上时有效。
最初是mouseover。好的.descr:focus 而不是:hover

【解决方案3】：

更改高度而不是“行”属性。

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

尝试使用该元素的 css。然后，编写你的 javascript 来改变你想要的属性。

https://developer.chrome.com/devtools

【讨论】：

这是一个非常愚蠢的问题，但你知道在旧的 Internet Explorer 中这样做吗？在我公司的电脑上，所以我无法下载另一个网络浏览器。我也有 Firefox，但它不会让我加载这些东西。
试图改变我所拥有的，但没有任何区别

【解决方案4】：

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

【讨论】：