快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

input文本框根据内容宽度自适应

2018-3-30 23:08| 发布者: antzone| 查看: 283| 评论: 0|来自: 蚂蚁部落

在文本框输入文本的时候,实现文本框的宽度能够自适应。

代码实例如下:

[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 () {
  var otxt = document.getElementById("txt");
  var 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>

上面的代码基本完美的实现了我们的要求,下面简单介绍一下它的实现过程。

一.实现原理:

当文本框输入内容的时,把内容同步到span中。

由于span宽度自适应,所以根据span元素的宽度来调整input元素的宽度。

由于display:none的元素无法获取offsetwidth,将其设置为绝对定位,然后移出我们视野。

二.代码注释:

(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。

(2).var otxt = document.getElementById("txt"),获取文本框元素对象。

(3).var ospan = document.getElementById("dis"),获取span元素对象。

(4).otxt.onkeyup = function () {},为文本框注册onkeyup事件处理函数。

(5).ospan.innerHTML = this.value,将文本框的内容赋值给span元素。

(6).if (ospan.offsetWidth > otxt.offsetWidth) {

  this.style.width = ospan.offsetWidth + "px";

},如果span元素的宽度超过了文本框的宽度,那么就将文本框的宽度设置为span元素的宽度。

三.相关阅读:

(1).onkeyup事件参阅javascript keyup事件一章节。

(2).innerHTML参阅innerHTML属性的用法一章节。

(3).offsetWidth参阅js offsetWidth一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 10:09 , Processed in 0.101502 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部