3

我需要在谷歌浏览器中调整文本字段的大小。我希望能够水平和垂直拖动文本字段的末尾。

这是我到目前为止所尝试的。我可以在文本字段的角落看到调整大小图标，但无法以任何方式移动它。我用过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>
4

3 回答 3

5

根据规范，除了设置属性之外，您还可以通过将属性设置为除 之外的任何值来调整任何元素（包括<input type=text>元素）的大小。overflowvisibleresize

实际上，即使是完全支持该resize属性的浏览器也可能对其适用性有所限制。<input type=text>如果您执行上述操作，Chrome 不会使元素可调整大小。这可能是一个错误，因为它显然正在尝试这样做：出现调整大小句柄。另一方面，即使您只是设置resize，Safari 也可以调整大小，而无需设置overflow.

有一种解决方法似乎可以在 Chrome 上运行，尽管它很笨拙而且看起来不健壮。将input元素放在 adiv中，并使其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>
于 2012-08-30T08:07:57.997 回答
2

请改用 textarea 元素。

这里的例子

于 2012-08-30T06:46:12.597 回答
0

resize是 html 输入类型的非样式属性text。因此，这意味着您正在尝试为文本输入标签分配错误的属性。

检查此链接以获取更多详细信息。从链接

适用于具有“溢出”而不是可见的元素

textarea按照其他答案中的说明使用。

于 2012-08-30T06:55:57.723 回答