Input文本框随着输入内容多少自动延伸的实现


Posted in Javascript onFebruary 15, 2017

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script language="javascript"> 
function checkLength(which) { 
  var oTextCount = document.getElementById("char");  
  iCount = which.value.replace(/[^/u0000-/u00ff]/g,"aa"); 
  oTextCount.innerHTML = "<font color=#FF0000>"+ iCount.length+"</font>"; 
  which.style.border = '1px dotted #FF0000'; 
which.size=iCount.length+2; 
} 
 </script> 
</head> 
<body> 
<input name="words" size="2"  onkeyup="checkLength(this)"/> 
  <span id="char">0</span>个字符 
</body> 
</html>

以上这篇Input文本框随着输入内容多少自动延伸的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 #Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 #Javascript
Canvas 绘制粒子动画背景
Feb 15 #Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 #Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 #Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 #Javascript
图文详解Javascript中的上下文和作用域
Feb 15 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
php设计模式小结
2013/02/15 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
Node.js  事件循环详解及实例
2017/08/06 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
家长通知书家长评语
2014/04/17 职场文书
邀请函样本
2015/02/02 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
mysql幻读详解实例以及解决办法
2022/06/16 MySQL