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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
PHP数据库操作面向对象的优点
2006/10/09 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
golang与PHP输出excel示例
2016/07/22 PHP
jquery form 加载数据示例
2014/04/21 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
python3序列化与反序列化用法实例
2015/05/26 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python中append实例用法总结
2019/07/30 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
纠纷协议书
2014/04/16 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
恰同学少年观后感
2015/06/08 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书