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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
Javascript异步流程控制之串行执行详解
Sep 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
php下实现折线图效果的代码
2007/04/28 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python语法快速入门指南
2015/10/12 Python
Python制作爬虫采集小说
2015/10/25 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python 三元运算符使用解析
2019/09/16 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Python3 集合set入门基础
2020/02/10 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
性能服装:HYLETE
2018/08/14 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
学雷锋标兵事迹材料
2014/08/18 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
公司慰问信范文
2015/03/23 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Mysql开启外网访问
2022/05/15 MySQL