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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
JS动画效果代码3
Apr 03 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
php模块memcache和memcached区别分析
2011/06/14 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python语言是免费还是收费的?
2020/06/15 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
EJB面试题
2015/07/28 面试题
公司年会演讲稿范文
2014/01/11 职场文书
司机职责范本
2014/03/08 职场文书
企业文化理念标语
2014/06/10 职场文书
公司户外活动总结
2014/07/04 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
经费申请报告
2015/05/15 职场文书