input文字框寬度自適應

admin發表於2018-11-16

實際應用中，可能需要input文字框能夠根據輸入字元的所佔據的寬度自動調節尺寸。

直接計算輸入字元所佔據的寬度，就如同直接稱量大象體重一樣比較困難。

可以和當年曹衝一樣轉換思路，達到殊途同歸的效果。

下面分享一個比較巧妙的實現方式，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#dis, #txt {
  font-size:12px;
}
#dis {
  position:absolute;
  z-index:1000;
  left:-500px;
}
</style>
<script>
window.onload = function () {
  let otxt = document.getElementById("txt");
  let ospan = document.getElementById("dis");
  otxt.onkeyup = function () {
    ospan.innerHTML = this.value;
    if (ospan.offsetWidth > otxt.offsetWidth) {
      this.style.width = ospan.offsetWidth + "px";
    }
  }
}
</script>
</head>
<body>
<input type="text" id="txt"/><br/>
<span id="dis"></span>
</body>
</html>

預設狀態下，文字框有一個最小寬度，當輸入的文字總寬度超過文字框預設寬的時候，能夠實現寬度自適應效果。

下面是自適應效果的實現原理與程式碼分解註釋。

一.實現原理：

預設input文字框的寬度並不能實現自適應，也很難去計算輸入文字具體的寬度。

轉換一下思路，將輸入文字框的內容同步到一個隱藏的span元素。

span是內聯元素，能夠根據內容的寬度自動伸展和收縮，並且很容易計算它的寬度。

然後將span元素的寬度設定為文字框的寬度，這樣就實現了文字框寬度自適應效果。

二.程式碼註釋：

[CSS] 純文字檢視 複製程式碼
#dis {
  position:absolute;
  z-index:-1000;
  left:-500px;
}

將span元素設定為絕對定位，並將left屬性值設定為-500px。

這樣此元素就不會出現在頁面可視範圍，且不會影響其他文件的佈局。

[JavaScript] 純文字檢視 複製程式碼
let otxt = document.getElementById("txt");
let ospan = document.getElementById("dis");

通過document.getElementById方法分別獲取文字框和span元素物件。

[JavaScript] 純文字檢視 複製程式碼
otxt.onkeyup = function () {}

為文字框註釋keyup事件處理函式，當按鍵彈起即會執行此函式。

[JavaScript] 純文字檢視 複製程式碼
ospan.innerHTML = this.value;

當按鍵彈起之後，會將文字框的值寫入span，基本達到了同步效果。

[JavaScript] 純文字檢視 複製程式碼
if (ospan.offsetWidth > otxt.offsetWidth) {
  this.style.width = ospan.offsetWidth + "px";
}

文字框有一個預設寬度（或者人為設定的最小寬度），判斷span元素當前的寬度是否大於這個預設寬度。

如果大於，那麼就將文字框的寬度設定為當前span元素的寬度，實現了寬度自適應效果。

三.相關閱讀：

（1）.絕對定位可以參閱CSS position:absolute 絕對定位一章節。

（2）.z-index可以參閱CSS z-index屬性一章節。

（3）.innerHTML可以參閱JavaScript innerHTML一章節。

（4）.offsetWidth可以參閱JavaScript offsetWidth一章節。

相關文章