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 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
理解和运用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简单系统查询模块代码打包下载
2008/06/07 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript 事件系统
2010/07/22 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
快速入手Python字符编码
2016/08/03 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python脚本开机自启的实现方法
2019/06/28 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
override和overload的区别
2016/03/09 面试题
材料物理专业个人求职信
2013/12/15 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
德育标兵事迹材料
2014/08/24 职场文书
单位工作证明范文
2014/09/14 职场文书
个人授权委托书模板
2014/09/14 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android