input文本框实现宽度自适应代码实例

最新推荐文章于 2023-09-12 10:26:30 发布

转载最新推荐文章于 2023-09-12 10:26:30 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/momox/p/5090842.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的动态调整文本框大小的方法。当用户输入的内容超过默认长度时，文本框会自动扩展以适应内容长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实例如下:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<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，否则就是输入内容的长度。

转载于:https://www.cnblogs.com/momox/p/5090842.html