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事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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版(5)
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python排序算法实例代码
2017/08/10 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python3.7 的新特性详解
2019/07/25 Python
Python实现某论坛自动签到功能
2019/08/20 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
师范毕业生求职信
2014/07/11 职场文书
承诺书样本
2014/08/30 职场文书
未中标通知书
2015/04/17 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers