js实现文本框宽度自适应文本宽度的方法


Posted in Javascript onAugust 13, 2015

本文实例讲述了js实现文本框宽度自适应文本宽度的方法。分享给大家供大家参考。具体如下:

一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话,那么我们输入的字符将会被隐藏,本段代码实现了文本框会自动适应输入文字的多少,它会自动加长。

运行效果如下图所示:

js实现文本框宽度自适应文本宽度的方法

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
微信小程序上传图片到php服务器的方法
May 23 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
理解和运用JavaScript的闭包机制
Aug 13 #Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 #Javascript
JavaScript的面向对象编程基础
Aug 13 #Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 #Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 #Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 #Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 #Javascript
You might like
apache+php+mysql安装配置方法小结
2010/08/01 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
PHP守护进程实例
2015/03/06 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
利用原生JS实现data方法示例代码
2019/05/28 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
护士见习期自我鉴定
2014/02/08 职场文书
数学国培研修感言
2014/02/13 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
2015年教师新年寄语
2014/12/08 职场文书
第一书记观后感
2015/06/08 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python