点击获取焦点可以伸缩的搜索框代码实例

快乐打工仔 分类:实例代码

在实际应用中经常有这样的搜索框,那就是当搜索框获取焦点的时候能够自动延伸,离开的时候又会恢复到原来的长度,下面就通过代码实例介绍一下如何实现此功能,代码实例如下:

<!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()一章节。

点击获取焦点可以伸缩的搜索框代码实例

回复

我来回复
  • 暂无回复内容