乙個搜尋頁面，上面輸入框，下面列表展示搜尋到的結果。
重點是：產品要求搜尋框預設顯示一行，當輸入的文字超過一行時，輸入框的高度會隨著改變，直到輸入完畢。
本想利用textarea實現，但textarea不支援自適應高度，而是定好高度或者是行數之後，超出部分就會顯示滾動條。只能另想。
後面想到可以利用html屬性contenteditable="true"，加在div上讓其可編輯來模擬自適應高度。可是需要在vue中雙向繫結實現，這個不是很好處理。
後面想到利用textarea的row屬性，根據輸入內容的長度控制row的值，為1-n行，但這個似乎不是很智慧型，因為多少個字型一行不一定，英文、中文、數字的寬度不一致，而且row屬性在每個瀏覽器中的表現不一致。
最後利用textarea，監聽change事件，讓其高度=其滾動條高度，來達到高度自適應。
沒想到最後還是利用了textarea。
參考：textarea如何實現高度自適應？
util.js
/**
* 文字框根據輸入內容自適應高度
* @param 輸入框元素
* @param 設定游標與輸入框保持的距離(預設0)
* @param 設定最大高度(可選)
* @callback 設定**函式(可選)
*/export const autotextarea = function (elem, extra, maxheight, callback) ,
getstyle = elem.currentstyle ? function (name) ;
return val;
} : function (name) ,
minheight = parsefloat(getstyle('height'));
elem.style.resize = 'none';
var change = function () ;
scrolltop = document.body.scrolltop || document.documentelement.scrolltop;
elem.style.height = minheight + 'px';
if (elem.scrollheight > minheight) else ;
style.height = height + extra + 'px';
scrolltop += parseint(style.height) - elem.currheight;
document.body.scrolltop = scrolltop;
document.documentelement.scrolltop = scrolltop;
elem.currheight = parseint(style.height);
callback(parseint(style.height));
};};
addevent('propertychange', change);
addevent('input', change);
addevent('focus', change);
change();
};export const debounce = function (func, delay)
timer = settimeout(() => , delay || 500);
}}
vue-search.vue
x
xib tableViewCell 自適應高度
1 在xib中給各個控制項新增約束 2 在model模型中 新增屬性 property nonatomic,assign cgfloat cellheight 高度 3 在cell中重寫model的set方法 在set方法中給cell中的控制項賦值 注意 在計算label的寬度的時候 要手動計算 因...
寬高自適應
網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是自適應 元素自適應在網頁布局中非常重要，他能夠使網頁顯示更加靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...
寬高自適應
寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...