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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
详解JS中的attribute属性
Apr 25 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 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桌面中心(三) 修改数据库
2007/03/11 PHP
php 中文和编码判断代码
2010/05/16 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
详解Python if-elif-else知识点
2018/06/11 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
函授大专自我鉴定
2013/11/01 职场文书
初三物理教学反思
2014/01/21 职场文书
称象教学反思
2014/02/03 职场文书
工作表现自我评价
2014/02/08 职场文书
与美同行演讲稿
2014/09/13 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
公务员保密工作承诺书
2015/05/04 职场文书