点击获取焦点可以伸缩的搜索框代码实例
在实际应用中经常有这样的搜索框，那就是当搜索框获取焦点的时候能够自动延伸，离开的时候又会恢复到原来的长度，下面就通过代码实例介绍一下如何实现此功能，代码实例如下:
<!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()一章节。