如何使用jQuery自動(dòng)調(diào)整輸入類型=“文本”字段的大??？我希望它一開始的寬度為100像素，然后在用戶輸入文字時(shí)使其自動(dòng)變寬……這可能嗎？
3 回答
莫回?zé)o
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
我認(rèn)為沒有完美的解決方案，因?yàn)槟鸁o法檢測(cè)輸入到輸入元素的文本的實(shí)際寬度。這完全取決于您使用的字體，瀏覽器中的縮放設(shè)置等。
但是，如果可以選擇一種字體，在其中可以實(shí)際計(jì)算文本的像素?cái)?shù)（這是最難的部分，但我想您可以嘗試以某種方式進(jìn)行估算）。您可以使用它來更改輸入字段的寬度。
$('input').keyup(function () {
// I'm assuming that 1 letter will expand the input by 10 pixels
var oneLetterWidth = 10;
// I'm also assuming that input will resize when at least five characters
// are typed
var minCharacters = 5;
var len = $(this).val().length;
if (len > minCharacters) {
// increase width
$(this).width(len * oneLetterWidth);
} else {
// restore minimal width;
$(this).width(50);
}
});
MM們
TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊
您好，我不知道您是否還在尋找，但是當(dāng)我正在尋找一個(gè)腳本來做同樣的事情時(shí)，我遇到了這個(gè)問題。因此，希望這對(duì)嘗試這樣做的人有所幫助。
function editing_key_press(e){
if(!e.which)editing_restore(this.parentNode);
var text = $('<span>')
.text($(this).val())
.appendTo(this.parentNode);
var w = text.innerWidth();
text.remove();
$(this).width(w+10);
}
此代碼的邏輯是將內(nèi)容跨度放在頁面上，然后獲取此內(nèi)容的寬度并將其刪除。我確實(shí)遇到的問題是我必須讓它同時(shí)在keydown和keyup上運(yùn)行才能成功工作。
希望這會(huì)有所幫助，可能不會(huì)，因?yàn)槲抑皇窃诙虝r(shí)間內(nèi)進(jìn)行jquery。