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 相关文章推荐
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
微信小程序实现电子签名并导出图片
May 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
PHP环境搭建最新方法
2006/09/05 PHP
php中explode与split的区别介绍
2012/10/03 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Python Tkinter实现简易计算器功能
2018/01/30 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python学生信息管理系统(初级版)
2018/10/17 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
中层干部岗位职责
2013/12/18 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
模范教师材料大全
2014/12/16 职场文书
公司辞职信模板
2015/05/13 职场文书
早上好问候语大全
2015/11/10 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js