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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
vue项目中js-cookie的使用存储token操作
Nov 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入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
车工岗位职责
2013/11/26 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
男方婚礼答谢词
2015/01/20 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
党校培训学习心得体会
2016/01/06 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Sql Server之数据类型详解
2022/02/28 SQL Server