如何通过使用 jQuery 拖动其右下角来调整文本输入框的大小（如 textarea）？

Posted 2023-05-07

【中文标题】如何通过使用 jQuery 拖动其右下角来调整文本输入框的大小（如 textarea）？

【英文标题】：How to make text input box resizable (like textarea) by dragging its right-bottom corner using jQuery?

【发布时间】：2012-01-24 05:22:57

【问题描述】：

我想要（最好在 jQuery 中）常规文本输入框，可以通过其右下角单击和拖动（例如，就像 Chrome 中的 textareas 一样）并由用户调整大小？

找不到任何已实现此功能的 jQuery 插件。任何人都可以给我提示是否存在这样的东西或如何轻松实现？

提前谢谢你。

编辑：我想像 Chrome 中的 textarea 一样调整大小...

【问题讨论】：

您希望<input type="text" /> 调整大小吗？或者您希望将 Chrome 和 Firefox 的 <textarea> 行为复制到所有浏览器？

抱歉我的解释不好。我希望 可以调整大小。这种行为的例子是 Chrome 中的 textarea....

调整<input type="text" /> 元素的大小是没有意义的，您不会神奇地将其转换为文本区域，它仍将是一个单行元素。除非您正在寻找在某些情况下可能有用的水平扩展。

@ChrisR 是的，我正在寻找横向扩展......

【参考方案1】：

你不需要 jQuery 来处理这个。你需要的是css。

#yourTextInput
resize:both;

这将允许您的文本输入在右侧具有调整大小选项

【讨论】：

哇，谢谢，这样一个简单而优雅的解决方案。我不知道这个 CSS 功能。谢谢。

调整大小 CSS 功能的规范有变化吗？它不再适用于输入元素，例如：jsfiddle.net/cbw7q/1 任何人都有关于此的任何信息？

【参考方案2】：

Anno 2016 有点复杂。您需要将 <input> 包装在您调整大小的“内联块”中：

.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>

【讨论】：

如果我将跨度线更改为Hello <span class="resizable-input"><input type="text" /><span> World，它的行为不会像我希望的那样（至少在 Firefox 中不会）。具体来说，我只看到他来自 World 的“W”，与拖动图像一起出现。调整大小是否可以“推”和“拉”后面的内联元素？

@alex.jordan：感谢您通知我！有一个错字：后者<span> 应该是</span>。

谢谢！我应该自己抓住它。模糊的眼睛:) 感谢您的回答。我有一个应用程序，我现在将研究使用它。

第一个帖子实际上是正确的，然后几个“错字”修复丢失了第二个 span 元素。现已修复。

@MoonLite：非常感谢！

【参考方案3】：

你看过jQuery UI resizable widget吗？

这里是source code for just the resizable example。

【参考方案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 中调整大小似乎不起作用（但看起来还可以（优雅降级））。尚未测试其他浏览器。