编程 Javascript

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文本框随着输入内容多少自动延伸的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

node.js中的path.normalize方法使用说明

Dec 08 Javascript

基于javascript实现图片预加载

Jan 05 Javascript

简单理解vue中el、template、replace元素

Oct 27 Javascript

关于 jQuery Easyui异步加载tree的问题解析

Dec 06 Javascript

Windows安装Node.js报错:2503、2502的解决方法

Oct 25 Javascript

vue 实现的树形菜的实例代码

Mar 19 Javascript

30分钟快速入门掌握ES6/ES2015的核心内容（上）

Apr 18 Javascript

Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

May 15 Javascript

vue3.0 CLI - 3.2 路由的初级使用教程

Sep 20 Javascript

分享5个小技巧让你写出更好的 JavaScript 条件语句

Oct 20 Javascript

vue vant中picker组件的使用

Nov 03 Javascript

详解Vue slot插槽

Nov 20 Vue.js

利用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生成条形码大揭秘

2015/09/24 PHP

有趣的JavaScript数组长度问题代码说明

2011/01/20 Javascript

面向对象的Javascript之二(接口实现介绍)

2012/01/27 Javascript

jQuery 图片切换插件(代码比较少)

2012/05/07 Javascript

jQuery实现列表自动循环滚动鼠标悬停时停止滚动

2013/09/06 Javascript

js中array的sort()方法使用介绍

2014/02/20 Javascript

Js实现滚动变色的文字效果

2014/06/16 Javascript

jQuery 遍历函数详解

2015/07/05 Javascript

整理Javascript函数学习笔记

2015/12/01 Javascript

JavaScript encodeURI 和encodeURIComponent

2015/12/04 Javascript

Bootstrap 附加导航（Affix）插件实例详解

2016/06/01 Javascript

JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

2016/06/05 Javascript

jQuery使用getJSON方法获取json数据完整示例

2016/09/13 Javascript

jQuery实现ajax无刷新分页页码控件

2017/02/28 Javascript

Node.js 8 中的 util.promisify的详解

2017/06/12 Javascript

浅析node.js的模块加载机制

2018/05/25 Javascript

js简单的分页器插件代码实例

2019/09/11 Javascript

Vue项目前后端联调(使用proxyTable实现跨域方式)

2020/07/18 Javascript

vue 实现setInterval 创建和销毁实例

2020/07/21 Javascript

[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3

2018/06/04 DOTA

Python多线程经典问题之乘客做公交车算法实例

2017/03/22 Python

Python使用PIL模块生成随机验证码

2017/11/21 Python

python爬取各类文档方法归类汇总

2018/03/22 Python

对numpy中轴与维度的理解

2018/04/18 Python

django之跨表查询及添加记录的示例代码

2018/10/16 Python

基于python的selenium两种文件上传操作实现详解

2019/09/19 Python

Lands’ End英国官方网站：高质量男女服装

2017/10/07 全球购物

Expedia韩国官网：亚洲发展最快的在线旅游门户网站

2018/02/26 全球购物

linux面试题参考答案（10）

2013/11/04 面试题

企业管理培训感言

2014/01/27 职场文书

共产党员承诺书

2014/03/25 职场文书

幼儿生日活动方案

2014/08/27 职场文书

2015年复活节活动总结

2015/02/27 职场文书

2015年五四青年节演讲稿

2015/03/18 职场文书

学生会部长竞选稿

2015/11/19 职场文书

SQL Server2019数据库备份与还原脚本，数据库可批量备份

2021/11/20 SQL Server