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 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
原生js实现选项卡功能
Mar 08 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
微信小程序关键字变色实现代码实例
Dec 13 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无限分类的深入理解
2013/06/02 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
PHP7 其他修改
2021/03/09 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
python 排序算法总结及实例详解
2016/09/28 Python
Python实现批量压缩图片
2018/01/25 Python
解析python的局部变量和全局变量
2019/08/15 Python
python中字典增加和删除使用方法
2020/09/30 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
存储过程和函数的区别
2013/05/28 面试题
庆七一活动方案
2014/01/25 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
购房意向书范本
2014/04/01 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
Python实现8种常用抽样方法
2021/06/27 Python