JavaScript实现文本框宽度随内容自适应

作者:木棉时间:2026-10-29 13:47:20浏览:337

本文介绍一种JavaScript实现文本框宽度随输入内容自动调整的方法。通过监听键盘事件,实时获取输入字符长度并动态修改input元素的size属性,使文本框宽度与文字长度保持一致,避免内容被隐藏。

JavaScript实现文本框宽度自适应

本文介绍一种利用JavaScript实现文本框宽度随输入内容自动调整的方法,供读者参考。

该功能通过JavaScript代码实现,当用户在文本框中输入字符时,文本框的宽度会根据字符数量自动增加。这解决了固定宽度文本框在内容较长时隐藏后续字符的问题,确保输入内容始终可见。

具体运行效果如图所示:

JavaScript实现文本框宽度自适应

实现代码如下:


<!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN"> 
<html> 
<head> 
<title>文本框宽度自动适应文本宽度</title> 
</head> 
<script type="text/javascript"> 
function changeInputlength(cursor) 
{ 
var getcount=document.getElementById("countFont"); 
var getText=document.getElementById("text"); 
getcount.innerHTML='<font>第'+(parseInt(getText.value.length)+1)+'个字符</font>'; 
cursor.size=getText.value.length+2; 
} 
</script> 
<body> 
请输入字符:<input type="text" size="3" id="text" onkeydown="changeInputlength(this);"/> 
<span id="countFont"></span> 
</body> 
</html>

希望本文介绍的JavaScript程序设计技巧能对读者有所帮助。

作者最新文章