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翻页滚动(示例代码)
Nov 18 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
国内咖啡文化
2021/03/03 咖啡文化
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
如何在PHP中生成随机数
2020/06/04 PHP
jquery高效反选具体实现
2013/05/05 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python与R语言的简要对比
2017/11/14 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python爬虫实例详解
2018/06/19 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
函数指针的定义是什么
2016/08/14 面试题
大学生大二自我鉴定
2013/10/28 职场文书
一岗双责责任书
2014/04/15 职场文书
党员对照检查材料
2014/09/22 职场文书
2014年居委会工作总结
2014/12/09 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
python for循环赋值问题
2021/06/03 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python