Question

从未使用过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";
});

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

EDIT2：感谢你们大家的帮助，我接近完成了！我现在至少可以明白它了解得更好！这是代码的图片。该对象实际上是一个“ms-formbody”???

和另一个编辑：所以这是我使用Johhny的代码后得到的错误：

Answer 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。

<强>更新

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

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

Answer 2

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

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

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

Answer 3

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

以chrome格式打开页面，打开开发人员工具（View-＆gt; Developer-＆gt; Developer Tools），然后使用“inspect”选择要操作的文本区域。

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

https://developer.chrome.com/devtools

Answer 4

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

缩小JavaScript中的表格

4 个答案: