How to make text input box resizable (like textarea) by dragging its right-bottom corner using jQuery?
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
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>