站长网(Downzz.com)
站长网(Downzz.com)
当前位置:首页 > 站长教程 > 建站经验 > JS教程
input文本框宽度自适应
时间:2019-01-09 01:18:10 围观:1327 来源:原创

实际应用中,可能需要input文本框能够根据输入字符的所占据的宽度自动调节尺寸。

直接计算输入字符所占据的宽度,就如同直接称量大象体重一样比较困难。

可以和当年曹冲一样转换思路,达到殊途同归的效果。

下面分享一个比较巧妙的实现方式,需要的朋友可以做一下参考。

代码实例如下:

<!DOCTYPE 
  font-size:12px;
}
#dis {
  position:absolute;
  z-index:1000;
  left:-500px;
}
</style>
<script>
window.onload = function () {
  let otxt = document.getElementById("txt");
  let 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>

默认状态下,文本框有一个最小宽度,当输入的文本总宽度超过文本框默认宽的时候,能够实现宽度自适应效果。

下面是自适应效果的实现原理与代码分解注释。

一.实现原理:

默认input文本框的宽度并不能实现自适应,也很难去计算输入文本具体的宽度。

转换一下思路,将输入文本框的内容同步到一个隐藏的span元素。

span是内联元素,能够根据内容的宽度自动伸展和收缩,并且很容易计算它的宽度。

然后将span元素的宽度设置为文本框的宽度,这样就实现了文本框宽度自适应效果。

二.代码注释:

#dis {
  position:absolute;
  z-index:-1000;
  left:-500px;
}

将span元素设置为绝对定位,并将left属性值设置为-500px。

这样此元素就不会出现在页面可视范围,且不会影响其他文档的布局。

let otxt = document.getElementById("txt");
let ospan = document.getElementById("dis");

通过document.getElementById方法分别获取文本框和span元素对象。

otxt.onkeyup = function () {}

为文本框注释keyup事件处理函数,当按键弹起即会执行此函数。

ospan.innerHTML = this.value;

当按键弹起之后,会将文本框的值写入span,基本达到了同步效果。

if (ospan.offsetWidth > otxt.offsetWidth) {
  this.style.width = ospan.offsetWidth + "px";
}

文本框有一个默认宽度(或者人为设定的最小宽度),判断span元素当前的宽度是否大于这个默认宽度。

如果大于,那么就将文本框的宽度设置为当前span元素的宽度,实现了宽度自适应效果。

-indexnnerHTMLffsetWidth
文章为作者独立观点不代表本网立场,未经允许不得转载。