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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 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/07/03 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
详解python中docx库的安装过程
2019/11/08 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
心理咨询承诺书
2014/05/20 职场文书
公司贷款承诺书
2014/05/30 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
法律意见书范文
2015/05/20 职场文书
元旦晚会开场白
2015/05/29 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
创业计划书之寿司
2019/07/19 职场文书