如何使用jQuery使文本输入框可以通过拖动其右下角进行调整大小（类似于textarea）？

Question

我希望有一个（最好是使用jQuery）常规文本输入框，可以通过其右下角被点击和拖动，由用户调整大小（例如，像Chrome中的文本区域）。目前找不到任何已经实现这功能的jQuery插件。请问是否存在类似的东西或者如何轻松地实现它？

提前感谢您。

编辑：我希望它可以像Chrome中的文本区域一样可缩放...

- Frodik

---

你希望<input type="text" />可以调整大小吗？还是你想要在所有浏览器中复制Chrome和Firefox的<textarea>行为？ - Interrobang

抱歉我的解释不好。我想要<input type="text" />可以调整大小。在Chrome中，这种行为的示例是textarea... - Frodik

调整 <input type="text" /> 元素的大小是没有意义的，你不会像魔术一样将其转换为文本区域，它仍然是单行元素。除非你想要水平扩展，在某些情况下可能有用。 - ChrisR

@ChrisR 是的，我正在寻找水平扩展... - Frodik

Answer 1

你不需要使用jQuery来处理这个问题。你需要使用CSS。

#yourTextInput{
resize:both;
}

这将使你的文本输入框在右侧具有调整大小的选项。

- XepterX

---

哇，谢谢，这个解决方案如此简单、优雅。我不知道这个 CSS 功能。谢谢。 - Frodik

resize CSS 属性的规格有所改变吗？它在输入元素上不再起作用，例如：http://jsfiddle.net/cbw7q/1/ 有人对此有任何信息吗？ - Frodik

resize 不适用于 "内联元素或设置了 overflow 属性为 visible 的块级元素"。输入是一个 inline-block 元素。 - Simon Weber

Answer 2

在2016年，这变得有点复杂。您需要将<input>包装在一个可调整大小的"inline-block"中：

.resizable-input {
    /* make resizable */
    overflow-x: hidden;
    resize: horizontal;
    display: inline-block;

    /* no extra spaces */
    padding: 0;
    margin: 0;
    white-space: nowrap;
  
    /* default widths */
    width: 10em;
    min-width: 2em;
    max-width: 30em;
}

/* let <input> assume the size of the wrapper */
.resizable-input > input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* add a visible handle */
.resizable-input > span {
    display: inline-block;
    vertical-align: bottom;
    margin-left: -16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
    cursor: ew-resize;
}

<span class="resizable-input"><input type="text" /><span></span></span>

- Kijewski

---

如果我将span行更改为Hello <span class="resizable-input"><input type="text" /><span> World，它不会按照我想要的方式运行（至少在Firefox中不会）。具体来说，我只能看到“World”中的“W”，出现在拖动图像中。调整大小是否可能“推”和“拉”其后面的内联元素？ - alex.jordan

@alex.jordan：谢谢你通知我！有一个错别字：后面的<span>应该是</span>。 - Kijewski

谢谢！我应该自己注意到那个问题。我的眼睛有点模糊 :) 还有感谢你提供的答案。我现在会考虑使用这个方法来开发我的应用程序。 - alex.jordan

第一篇帖子实际上是正确的，然后几个“笔误”修复导致第二个 span 元素丢失了。现在已经修复好了。 - MoonLite

@MoonLite：非常感谢你！ - Kijewski

Answer 3

你看过jQuery UI resizable widget吗？

这里是仅限可调整大小示例的源代码。

- PatrikAkerstrand

Answer 4

我对Kay的回答进行了变化，使用伪元素::after代替第二个。简而言之：

.resizable-input { ... }
.resizable-input > input { ... }
.resizable-input::after { ... }
/* the last one used to be .resizable-input > span { ... } */

只需使用HTML：

<span class="resizeable-input"><input type="text"/></span>

在此处查看完整代码并查看其运行情况： https://jsfiddle.net/ElMoonLite/qh703tbe/

还添加了input { padding-right: 0.5em; }，这样即使输入框中充满文本，您仍然可以调整其大小。

---

在2019年的Chrome中似乎仍然有效。
在Edge中，调整大小似乎无法正常工作（但除此之外看起来还不错（优雅降级））。尚未测试其他浏览器。

- MoonLite