我能否阻止Chrome的<textarea>拖动扩展功能?

12
在Chrome中,可以拖动<textarea>字段的右下角来扩展文本区域。有时这很有优势,但有时并不是这样。(这个讨论留到另一个时间。)
我想知道的是,如果可能的话,如何阻止这种行为。我在想一些JS / jQuery小工具之类的东西,但我不知道谷歌是如何编程这个功能的。
有人尝试过吗?

1
onresize: event.preventDefault(), return false; 在调整大小事件中:event.preventDefault(),返回false; - kirilloid
@kirilloid:这会对用户显示出什么?<textarea>字段的右下角是否仍会有一个图标,但用户无法执行任何操作? - Kiwi
不知道 =)我甚至不知道这是否有效 - 只是一个想法。因此,请使用答案中的CSS解决方案。 - kirilloid
3个回答

23

你尝试使用CSS来解决这个问题了吗?

textarea {
  resize: none;
}

这应该会禁用拖动展开功能。

更新

你也可以使用 jQuery 编程设置此功能:

// CSS
textarea.no-expand {
  resize: none;
}

// jQuery
$('#my-text-area').addClass('no-expand');

希望这能帮到你!


我不知道 resize。看起来它应该能完成任务。谢谢你们所有人。 - Kiwi
你也可以使用 #my-text-area { resize: none; }。通常情况下,当你只需要使用 CSS 就能轻松实现相同效果时,我不认为有必要引入 JavaScript。 - Nelson Rothermel
@nelson,我只是想提一下jQuery的替代方案,以防他想通过编程控制拖动展开功能。 - CalebHC
我误解了你想表达的观点。我明白了。 - Nelson Rothermel

6

虽然我来得有点晚,但接下来是我的翻译。使用 resize: none 的解决方案存在问题,因为它不是合法的 CSS。这不仅不能验证,而且在其他浏览器上无法正常工作,并且可能在 Chrome 的未来版本中出现问题。一种有效的解决方案是:

textarea {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
}

当然,你应该相应地调整大小。当然,这没有“resize:none”的灵活性(你不能只在页面上应用一种样式来调整所有的文本区域),所以在这方面,“resize:none”会更好。但是,如果你能使用这个解决方案,那么你应该使用它。

1

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