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模拟弹出效果代码修正版
Aug 07 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
Vue基于localStorage存储信息代码实例
Nov 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中使用Oracle数据库(1)
2006/10/09 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Promise.all中对于reject的处理方法
2018/08/01 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python itertools.product方法代码实例
2020/03/27 Python
Python Selenium库的基本使用教程
2021/01/04 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
日期和时间问题
2015/01/04 面试题
给女朋友的道歉信
2014/01/10 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
自我推荐信范文
2014/05/09 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
优秀教师个人材料
2014/12/15 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
同意报考公务员证明
2015/06/17 职场文书
党员公开承诺书2016
2016/03/24 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
详解SQL的窗口函数
2022/04/21 Oracle