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 调试器简介
Feb 21 Javascript
JS分页效果示例
Oct 11 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
理解和运用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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP验证码函数代码(简单实用)
2013/09/29 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
在python里面运用多继承方法详解
2019/07/01 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
国家励志奖学金获奖感言
2014/01/09 职场文书
学校社会实践活动总结
2014/07/03 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
如何使用python包中的sched事件调度器
2022/04/30 Python