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 相关文章推荐
javascript小数四舍五入多种方法实现
Dec 23 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
详解Vue router路由
Nov 20 Vue.js
理解和运用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数组操作类实例
2015/07/11 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
原生js实现日历效果
2020/03/02 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python for循环remove同一个list过程解析
2019/08/14 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
用Python 执行cmd命令
2020/12/18 Python
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
关于读书的演讲稿400字
2014/08/27 职场文书
师范生教育见习总结
2015/06/23 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
python创建字典及相关管理操作
2022/04/13 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android