Javascript 如何通过使用 jQuery 拖动其右下角来调整文本输入框的大小（如 textarea）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8572190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make text input box resizable (like textarea) by dragging its right-bottom corner using jQuery?
提问by Frodik
I would like to have (preferrably in jQuery) regular text input box which can be clicked and dragged by its right-bottom corner (e.g. like textareas have in Chrome) and resized by user ?
我想要（最好在 jQuery 中）常规文本输入框，可以通过其右下角单击和拖动（例如 Chrome 中的 textareas）并由用户调整大小？
Can't find any jQuery plugin already implementing this. Can anybody give me hint if something like this exists or how could it be easily implemented ?
找不到任何已经实现此功能的 jQuery 插件。任何人都可以给我提示是否存在这样的东西或者如何轻松实现？
Thank you in advance.
先感谢您。
EDIT: I want to be resizable similarly like textarea is in Chrome...
编辑：我想像 textarea 在 Chrome 中一样调整大小...
回答by XepterX
You don't need jQuery to handle this. What you need is css.
你不需要 jQuery 来处理这个。你需要的是css。
#yourTextInput{
resize:both;
}
This will allow your text input to have the resize option on the right
这将允许您的文本输入在右侧具有调整大小选项
回答by kay - SE is evil
Anno 2016 it is a bit more complicated. You need to wrap the <input>in an "inline-block" that you made resizable:
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>回答by PatrikAkerstrand
Have you looked at the jQuery UI resizable widget?
你看过jQuery UI 可调整大小的小部件吗？
Here is the source code for just the resizable example.
回答by MoonLite
I made a variation on kay's answer, using the pseudo element ::afterinstead of a second span. in short:
我对 kay 的回答进行了修改，使用伪元素::after而不是第二个跨度。简而言之：
.resizable-input { ... }
.resizable-input > input { ... }
.resizable-input::after { ... }
/* the last one used to be .resizable-input > span { ... } */
with html just:
与 html 只是：
<span class="resizeable-input"><input type="text"/></span>
See full code and see it in action here: https://jsfiddle.net/ElMoonLite/qh703tbe/
查看完整代码并在此处查看它的操作：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.
还添加了input { padding-right: 0.5em; }这样的内容，如果它的值充满文本，您仍然可以调整它的大小。
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.
在 2019 年的 Chrome 中似乎仍然有效。
在 Edge 中调整大小似乎不起作用（但其他方面看起来不错（优雅降级））。尚未测试其他浏览器。
