input文字框實現寬度自適應程式碼例項

青衫無名發表於2018-03-01

本章節介紹一下如何讓一個文字框的寬度能夠隨著文字框中的內容的寬度增長而增長，也就是能夠實現寬度自適應效果。

程式碼例項如下:















01


02


03


04


05


06


07


08


09


10


11


12


13


14


15


16


17


18


19






<!DOCTYPE html>



<html>




<head>




<meta charset=" utf-8">




<meta name="author" content="http://www.softwhy.com/" />




<title>螞蟻部落</title>




<script type="text/javascript">



window.onload=function(){



  var otxt=document.getElementById("txt");




  otxt.onkeyup=function(){




    this.size=(this.value.length>4?this.value.length:4);




  }



}



</script>




</head>




<body>




<input type="text" id="txt" size="4"/> 




</body>




</html>

















以上程式碼實現了我們的要求，程式碼非常的簡單，註冊onkeyup事件處理函式，此函式可以判斷當前輸入內容的長度是否大於預設長度，如果不大於，則文字框的長度就是4，否則就是輸入內容的長度。




原文釋出時間為：2017-2-11


本文作者：admin


本文來自雲棲社群合作伙伴“螞蟻部落”，瞭解相關資訊可以關注螞蟻部落


原文連結：input文字框實現寬度自適應程式碼例項










相關文章