如何在 Chrome 中调整文本字段的大小？
Posted
技术标签:
【中文标题】如何在 Chrome 中调整文本字段的大小？【英文标题】：How to resize a text field in Chrome? 【发布时间】：2012-08-24 20:24:19 【问题描述】：我需要在谷歌浏览器中调整文本字段的大小。我希望能够水平和垂直拖动文本字段的末尾。
这是我迄今为止尝试过的。我可以在文本字段的角落看到调整大小图标，但无法以任何方式移动它。我用过style="resize:horizontal;" 有人能告诉我哪里出错了...
谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Feilds</title>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="txt1" style="resize:horizontal;" />
<input type="text" id="txt2" style="resize:both;" />
<input type="text" id="txt3" style="resize:vertical;"/>
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
【参考方案1】：根据规范，除了设置resize 属性之外，您还可以通过将overflow 属性设置为visible 以外的任何值来调整任何元素（包括<input type=text> 元素）的大小。
实际上，即使是完全支持resize 属性的浏览器也可能对其适用性有所限制。如果您执行上述操作，Chrome 不会使 <input type=text> 元素可调整大小。这可能是一个错误，因为它显然正在尝试这样做：出现调整大小句柄。另一方面，即使您只设置resize，而不设置overflow，Safari 也可以调整大小。
有一种解决方法似乎可以在 Chrome 上运行，尽管它很笨拙且看起来不健壮。将input 元素放在div 中，使div 可调整大小并将input 宽度设置为接近100%。不是 100%，因为这会搞砸（调整大小手柄没有空间）。像这样的：
<div style="resize: horizontal; width: 15em;
overflow: auto; border: solid gray 1px">
<input style="width: 96%; border: none; resize: none">
</div>
【讨论】：
非常感谢@Jukka...这正是我想要的:) 干杯【参考方案2】：改用 textarea 元素。
Example here
【讨论】：
我认为输入标签至少允许水平调整大小。 @Mythril：谢谢。但是，我希望它发生在文本字段上。 Tyler：是的，AFAIK 应该是水平发生的，我的意思是至少 HTML5 格式。谢谢 TextArea 默认可以调整大小。文本字段怎么样？ 文本区域是一个文本字段。如果您的意思是 ，则没有指定以这种方式工作。见 mtk 的回答。 是的，我的意思是 。有什么办法可以吗？【参考方案3】：resize 是 html 输入类型 text 的非样式属性。因此，这意味着您试图为文本输入标签分配错误的属性。
查看link 了解更多详情。来自链接
适用于 具有“溢出”而不是可见的元素
使用textarea，如其他答案中所述。
【讨论】：
这家伙，好像做到了。 . ***.com/questions/11535439/…以上是关于如何在 Chrome 中调整文本字段的大小？的主要内容，如果未能解决你的问题，请参考以下文章
如何创建文本字段、调整它们的大小并将它们放在报表的列中的示例
如何以编程方式使用自动调整大小掩码为固定左边距和灵活右边距设置文本字段