點選獲取焦點可以伸縮的搜尋框程式碼例項

admin發表於2017-04-09

在實際應用中經常有這樣的搜尋框，那就是當搜尋框獲取焦點的時候能夠自動延伸，離開的時候又會恢復到原來的長度，下面就通過程式碼例項介紹一下如何實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>螞蟻部落</title>
<style>
#txt{
  width:200px;
  border:1px solid #ccc;
}
</style>
<script>
window.onload = function () {
  var otxt = document.getElementById("txt");
  var maxW = 250;
  var minW = 200;
  var timer = null;
  otxt.onfocus = function () {
    timer = setInterval(function () {
      if (otxt.offsetWidth >= maxW) {
        clearInterval(timer);
      } else {
        otxt.style.width = (otxt.offsetWidth + 2) + "px";
      }
    },50)
  }
  otxt.onblur = function () {
    timer = setInterval(function () {
      if (otxt.offsetWidth >= minW) {
        otxt.style.width = (otxt.offsetWidth - 4) + "px";
      } else {
        clearInterval(timer);
      }
    }, 50)
  }
}
</script>
</head>
<body>
<input type="text" id="txt"/>
<input type="button" id="bt" value="搜尋"/>
</body>
</html>

上面的程式碼實現了我們的要求，當然實際應用的中效果更為美觀一些，通常是採用緩衝效果。

具體可以參閱滑鼠點選文字框寬度緩衝增加效果一章節，下面介紹一下上面效果的實現過程。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var otxt = document.getElementById("txt")，獲取文字框元素。

（3）.var maxW = 250，宣告一個變數並賦值為250，作為最大值。

（4）.var minW = 200，宣告一個變數並賦值為200，作為最小值。

（5）.var timer = null，宣告一個變數，用來作為定時器函式的標識。

（6）.otxt.onfocus = function () {}，為文字框註冊onfocus 事件處理函式。

（7）.timer = setInterval(function () {

  if (otxt.offsetWidth >= maxW) {

    clearInterval(timer);

  } else {

    otxt.style.width = (otxt.offsetWidth + 2) + "px";

  }

},50)，一個定時器函式，每隔50毫秒執行一次指定的函式。

如果文字框的offsetWidth值大於等於最大值，那麼就停止定時器函式的執行。

否則就會每執行一次width屬性值加4，因為otxt.offsetWidth等於width+border。

二.相關閱讀:

（1）.setInterval()可以參閱setInterval()一章節。

（2）.offsetWidth可以參閱js offsetWidth一章節。

（3）.clearInterval()可以參閱window.clearInterval()一章節。

相關文章