当前位置：文江博客话题详情

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

发布于 2024-12-22 04:59:58 字数 197 浏览 3 评论 0原文

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

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

先感谢您。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

折戟 2024-12-29 04:59:58

您不需要 jQuery 来处理这个问题。你需要的是CSS。

#yourTextInput{
resize:both;
}

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

You don't need jQuery to handle this. What you need is css.

#yourTextInput{
resize:both;
}

This will allow your text input to have the resize option on the right

回复收藏 0 原文

泪痕残 2024-12-29 04:59:58

《纪元 2016》则有点复杂。您需要将包装在您调整大小的“内联块”中：

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

Anno 2016 it is a bit more complicated. You need to wrap the <input> in an "inline-block" that you made resizable:

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

回复收藏 0 原文

梦过后 2024-12-29 04:59:58

您是否看过 jQuery UI 可调整大小小部件？

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

回复收藏 0 原文

念三年u 2024-12-29 04:59:58

我对 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-右：0.5em；因此，如果它的值充满了文本，您仍然可以调整它的大小。

2019 年 Chrome 中似乎仍然有效。
在 Edge 中，调整大小似乎不起作用（但在其他方面看起来不错（优雅降级））。尚未测试其他浏览器。

I made a variation on kay's answer, using the pseudo element ::after instead of a second span. in short:

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

with html just:

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

See full code and see it in action here:
https://jsfiddle.net/ElMoonLite/qh703tbe/

Also added input { padding-right: 0.5em; } so you can still resize it if it's value is full of text.

Still seems to work in 2019 in Chrome.
In Edge resize does not seem to work (but otherwise looks ok (graceful degradation)). Haven't tested other browsers yet.

回复收藏 0 原文

~没有更多了~