input文本框实现宽度自适应代码实例
本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长，也就是能够实现宽度自适应效果。
代码实例如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
<
script
type
=
"text/javascript"
>
window.onload=function(){
var otxt=document.getElementById("txt");
otxt.onkeyup=function(){
this.size=(this.value.length>4?this.value.length:4);
}
}
</
script
>
</
head
>
<
body
>
<
input
type
=
"text"
id
=
"txt"
size
=
"4"
/>
</
body
>
</
html
>
|
以上代码实现了我们的要求，代码非常的简单，注册onkeyup事件处理函数，此函数可以判断当前输入内容的长度是否大于默认长度，如果不大于，则文本框的长度就是4，否则就是输入内容的长度。
原文发布时间为：2017-2-11
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：input文本框实现宽度自适应代码实例
