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中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
建立动态的WML站点(一)
2006/10/09 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python中fnmatch模块的使用详情
2018/11/30 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
会走路的树教学反思
2014/02/20 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
2014年环卫工作总结
2014/11/22 职场文书
运动会加油稿50字
2015/07/21 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书