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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
Js切换功能的简单方法
Nov 23 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
jQuery 选择器详解
2015/01/19 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
详解JS模块导入导出
2017/12/20 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
JS数据类型STRING使用实例解析
2019/12/18 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Python日期操作学习笔记
2008/10/07 Python
基于Python实现文件大小输出
2016/01/11 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
wxpython实现图书管理系统
2018/03/12 Python
python画双y轴图像的示例代码
2019/07/07 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
python输入中文的实例方法
2020/09/14 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
物业管理应届生求职信
2013/10/28 职场文书
体育教学随笔感言
2014/02/24 职场文书
主题实践活动总结
2014/05/08 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers