How To Make Text Input Box Resizable (like Textarea) By Dragging Its Right-bottom Corner Using JQuery?
Solution 1:
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
Solution 2:
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>
Solution 3:
Have you looked at the jQuery UI resizable widget?
Here is the source code for just the resizable example.
Solution 4:
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.
Post a Comment for "How To Make Text Input Box Resizable (like Textarea) By Dragging Its Right-bottom Corner Using JQuery?"