我希望有(最好在jQuery中)常規文本輸入框,它可以點擊並右下角拖動(例如textareas在Chrome中有)並由用戶調整大小?如何通過使用jQuery拖動其右下角來使文本輸入框可調整大小(如textarea)?
找不到任何已經實現此功能的jQuery插件。任何人都可以給我暗示,如果這樣的事情存在或者它如何被輕易實現?
預先感謝您。
編輯:我想成爲可調整大小同樣喜歡textarea的是Chrome瀏覽器...
我希望有(最好在jQuery中)常規文本輸入框,它可以點擊並右下角拖動(例如textareas在Chrome中有)並由用戶調整大小?如何通過使用jQuery拖動其右下角來使文本輸入框可調整大小(如textarea)?
找不到任何已經實現此功能的jQuery插件。任何人都可以給我暗示,如果這樣的事情存在或者它如何被輕易實現?
預先感謝您。
編輯:我想成爲可調整大小同樣喜歡textarea的是Chrome瀏覽器...
安諾2016大小的選項更復雜一些。你需要用的<input>
中所做的可調整大小 「inline-block的」:
.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>
你想爲''是可調整大小?或者您想將Chrome和Firefox的「
對不起,我的錯誤解釋。我希望可以調整大小。這種行爲的例子是Chrome中的textarea .... – Frodik 2011-12-20 07:49:42
調整一個''元素的意義毫無意義,你不會奇蹟般地將它轉換爲textarea,它仍然是單行元素。除非你正在尋找橫向擴展,在某些情況下可能是有用的。 – ChrisR 2011-12-20 07:49:51